Why control doesn't pick up the generic style defined for the controls of it's type

122 views Asked by At

I am trying to apply the following style for all the borders in my form:

  <UserControl.Resources>

    <Style TargetType="{x:Type Border}">
      <Setter Property="BorderBrush" Value="#5076A7" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="CornerRadius" Value="4" />
    </Style>

    <Style ... />

  <UserControl.Resources>

However my border inside my ListView and also non of the other borders pick up this style unless I use the x:Key FooSyle value and refer to the key in my <Boder Style={StaticResource FooStyle}> which if for sure not what I want to do.

The border is mentioned below:

   <ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
      <Style.Setters>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
              <Border>
                <Grid Margin="2">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>
         ...

What I am missing here?

3

There are 3 answers

0
Mehrad On BEST ANSWER

I have solved the problem by allocating the Border Style to that Style's <Style.Resources> with is described as a Nested Styles concept such as below:

   <ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
      <Style.Setters>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
              <Border>
                <Grid Margin="2">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>

                ...
                </Grid>
              </Border>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style.Setters>
      <!--Nested Style-->
      <Style.Resources>
            <Style TargetType="{x:Type Border}">
              <Setter Property="CornerRadius" Value="1" />
            </Style>
            <Style TargetType="{x:Type TextBox}">
              <Setter Property="Background" Value="Transparent" />
              <Setter Property="Foreground" Value="White" />
            </Style>
      </Style.Resources>
    </Style>
  </ListView.ItemContainerStyle>
1
MLElyakan On

You can add BorderStyle in to ControlTemplate.Resources

Here is code:

  <ListView>
    <ListViewItem Content="asdasd"/>
    <ListViewItem Content="asdasd"/>
    <ListViewItem Content="asdasd"/>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <ControlTemplate.Resources>
                                <Style x:Key="ListViewItemBorderStyle" TargetType="{x:Type Border}">
                                    <Setter Property="Background" Value="Red"/>
                                    <Setter Property="BorderBrush" Value="#5076A7" />
                                    <Setter Property="BorderThickness" Value="1" />
                                    <Setter Property="CornerRadius" Value="4" />
                                </Style>
                            </ControlTemplate.Resources>
                            <Border Height="100" Style="{StaticResource ListViewItemBorderStyle}">
                             <!--....-->
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>
0
MLElyakan On

I've written two style code for your problem.You can use Style.Resources or ControlTemplate.Resources.Also,you have found the right solution

Here is code: (using DynamicResource)

 <Window.Resources>
    <Style x:Key="ListViewItemBorderStyle" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="BorderBrush" Value="#5076A7" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="4" />
    </Style>
</Window.Resources>

 <ListView>
    <ListViewItem Content="asdasd"/>
    <ListViewItem Content="asdasd"/>
    <ListViewItem Content="asdasd"/>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <Border Height="100" Style="{DynamicResource ListViewItemBorderStyle}">
                                <!--....-->
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Another one code( using StaticResource).It's embedded in a ControlTemplate

 <ListView>
    <ListViewItem Content="asdasd"/>
    <ListViewItem Content="asdasd"/>
    <ListViewItem Content="asdasd"/>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <ControlTemplate.Resources>
                                <Style x:Key="ListViewItemBorderStyle" TargetType="{x:Type Border}">
                                    <Setter Property="Background" Value="Red"/>
                                    <Setter Property="BorderBrush" Value="#5076A7" />
                                    <Setter Property="BorderThickness" Value="1" />
                                    <Setter Property="CornerRadius" Value="4" />
                                </Style>
                            </ControlTemplate.Resources>
                            <Border Height="100" Style="{DynamicResource ListViewItemBorderStyle}">
                                <!--....-->
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>