Forums | NoesisGUI

Posted: **31 May 2013, 01:51**

I'm having an issue trying to use merged resource dictionaries to define a style. Essentially, I'm building a style that makes a ListBox completely look-less.

I've got this set up with Unity, using Test.xaml as my main XAML file, and Styles.xaml as my Styles file. It looks like the default styling, wherever it is defined, is showing through (looks like the Noesis style from the samples).

Gui/Common/Content/Brushes.xaml:

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <SolidColorBrush x:Key="TextForegroundBrush" Color="White" />
  
</ResourceDictionary>

Gui/Common/Content/ListBox.xaml:

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/Gui.Common;component/Brushes.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <!-- Focus Visual -->
  <Style x:Key="ListBoxItemFocusVisual">
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate>
          <Border />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- ListBox Style -->
  <Style TargetType="{x:Type ListBox}">
    <Setter Property="UseLayoutRounding" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="Foreground" Value="Transparent"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBox}">
          <Border
            Name="Border"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Padding="1"
            CornerRadius="2"
            UseLayoutRounding="True">
            <ScrollViewer
              Margin="{TemplateBinding Padding}"
              Focusable="false"
              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
              CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}">
              <ItemsPresenter UseLayoutRounding="{TemplateBinding UseLayoutRounding}"/>
            </ScrollViewer>
          </Border>
          <ControlTemplate.Triggers>
            <!--<Trigger Property="IsEnabled" Value="false">
              <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}"/>
            </Trigger>
            <Trigger Property="IsGrouping" Value="true">
              <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
            </Trigger>-->
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- ListBoxItem Style -->
  <Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
    <Setter Property="UseLayoutRounding" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="FocusVisualStyle" Value="{StaticResource ListBoxItemFocusVisual}"/>
    <Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="2,0,0,0"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
          <Border Name="Border"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}"
                  UseLayoutRounding="true">
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              UseLayoutRounding="{TemplateBinding UseLayoutRounding}"/>
          </Border>
          <ControlTemplate.Triggers>
            <!--<Trigger Property="IsSelected" Value="true">
              <Setter TargetName="Border" Property="Background" Value="Transparent"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Foreground" Value="Transparent"/>
            </Trigger>-->
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

Gui/Common/Content/Styles.xaml:

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
    <!-- Common, Reusable components -->
    <ResourceDictionary Source="/Gui.Common;component/Brushes.xaml" />
    
    <!-- Control styles -->
    <ResourceDictionary Source="/Gui.Common;component/ListBox.xaml" />
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Gui/Game/Content/Test.xaml:

<Border xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch">
  <ListBox>
    <ListBoxItem Content="1" />
    <ListBoxItem Content="2" />
    <ListBoxItem Content="3" />
    <ListBoxItem Content="4" />
    <ListBoxItem Content="5" />
  </ListBox>
</Border>

However, if I do a merge of the styles resource dictionary from Test.xaml, the styles are applied correctly:
Gui/Game/Content/Test.xaml (working):

<Border xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch">
  <Border.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Gui.Common;component/Styles.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Border.Resources>
  <ListBox>
    <ListBoxItem Content="1" />
    <ListBoxItem Content="2" />
    <ListBoxItem Content="3" />
    <ListBoxItem Content="4" />
    <ListBoxItem Content="5" />
  </ListBox>
</Border>

Posted: **31 May 2013, 09:38**

It's strange because what we do with the xaml file set in Style property of the Noesis GUI Panel it is exactly the same that you do in the last sample, the one is working. We load the style xaml and, if it is a ResourceDictionary, we add it to the root element's MergedDictionaries of the xaml file set in Xaml property.

We will investigate what is happening to produce different results and fix it.

Posted: **03 Jun 2013, 17:12**

Bug found and solved

Will be fixed in the following release.

Forums | NoesisGUI

Unity 0.99: Issue with nested merged ResourceDictionary

Unity 0.99: Issue with nested merged ResourceDictionary

Re: Unity 0.99: Issue with nested merged ResourceDictionary

Re: Unity 0.99: Issue with nested merged ResourceDictionary