CODEWITHSUNDEEP
wpflistboxitemtemplate
Rachael
Rachael

Reputation: 1993

Can't get style of ItemTemplate To show when Style is used for ListBox

My Simple code for styling a ListBox and its Items:

    <Style x:Key="SelectorPanelListBoxStyle" TargetType="{x:Type ListBox}">
    <Setter Property="Background" Value="{x:Null}"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Border.CornerRadius" Value="2"/>
    <Setter Property="ItemTemplate" x:Name="MyItemTemplate">

        <Setter.Value>
            <DataTemplate >
                <Border BorderBrush="White" BorderThickness="1" CornerRadius="5" OverridesDefaultStyle="True">
                    <Grid Height="57" Width="145">

                            <Label Content="{TemplateBinding Content}" />

                            <ContentControl Content="{Binding}" Foreground="White" />

                        </Grid>
                        </Border>

            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Each of my Styles is stored as a resource library file in the resources section of my project, linked as "merged dictionaries" in a ResourceLibrary" master file, which is referenced by the App.xaml. That clearly is working because I already have many of these styles in use.

I use the styles in my views analogously to the following example:

 <ListBox Style="{StaticResource SelectorPanelListBoxStyle}" ..../>

Unfortunately, The BorderBrush, BorderThickness, CornerRadius/etc only show up in the breadcrumbs editor in blend, and are NOT applied when style is actually used. Sometimes not even that. What am I doing wrong?

Thanks in advance!

Upvotes: 0

Views: 2572

Answers (1)

JosephGarrone
JosephGarrone

Reputation: 4161

I think you need to use a <ControlTemplate> instead of a <DataTemplate>. I would write your above style as:

<Style x:Key="SelectorPanelListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Border.CornerRadius" Value="2"/>
<Setter Property="ItemTemplate" x:Name="MyItemTemplate">
    <Setter.Value>
        <ControlTemplate>
            <Border BorderBrush="White" BorderThickness="1" CornerRadius="5" OverridesDefaultStyle="True">
                <Grid Height="57" Width="145">
                    <Label Content="{TemplateBinding Content}" />
                    <ContentControl Content="{Binding}" Foreground="White" />
                </Grid>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

One of my own ListBox styles is below in case it might help you:

    <Style TargetType="{x:Type ListBox}">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="AllowDrop" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border BorderThickness="0">
                        <ScrollViewer Margin="0">
                            <StackPanel Margin="0" IsItemsHost="True"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate x:Key="GridViewTemplate">
        <Border BorderBrush="LightBlue" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" CornerRadius="0">
            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <TextBlock FontFamily="Segoe UI Light" FontSize="18" Text="{Binding PropFullName}" Margin="2,2,2,2" DockPanel.Dock="Top"/>
                    <TextBlock FontFamily="Segoe UI Light" FontSize="18" Text="{Binding PropTitle}" Margin="2,2,2,2" DockPanel.Dock="Top"/>
                </DockPanel>
            </Grid>
        </Border>
    </DataTemplate>

The DataTemplate is then set as follows:

    <ListBox.ItemTemplate>
         <StaticResource ResourceKey="GridViewTemplate"/>
    </ListBox.ItemTemplate>

EDIT 1:

        <DataTemplate x:Key="MyListBoxTemplate">
            <Border BorderBrush="White" BorderThickness="1" CornerRadius="5" OverridesDefaultStyle="True">
                <Grid Height="57" Width="145">
                    <Label Content="{TemplateBinding Content}" />
                    <ContentControl Content="{Binding}" Foreground="White" />
                </Grid>
            </Border>
        </DateTemplate>

    <Style TargetType="{x:Type ListBox}">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="AllowDrop" Value="True"/>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <StaticResource ResourceKey="MyListBoxItemTemplate"
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 2

Related Questions