customize the Border property with CornerRadius for ListBox

soma sekhar picture soma sekhar · Aug 24, 2011 · Viewed 12k times · Source

I want to customize the following Listbox-display property of border with CornerRadius=5..can anyone help me to achieve it without changing the existing datatemplate code in the following Xaml code:

<ListBox x:Uid="lst_value"  Name="lstValues" Background="Wheat" BorderBrush="Black"
         HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Height="100" Width="150"
         ItemsSource="{Binding listval}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" Background="{Binding}">
                <TextBlock x:Name="txtblk" Foreground="Black" FontSize="10"  TextAlignment="Left" 
                                               FontWeight="Black" Text="{Binding}" Background="{Binding}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer

Fredrik Hedblad picture Fredrik Hedblad · Aug 24, 2011

If you want the Border within the ListBoxItems to have another CornerRadius value, you can either re-template ListBoxItem where the Border is defined, or set it implicitly in the ItemContainerStyle Resources

<ListBox ...>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Style.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="5"/>
                </Style>
            </Style.Resources>
        </Style>
    </ListBox.ItemContainerStyle>
    <!--...-->
</ListBox>

Edit: If you want to set CornerRadius for the ListBox, you can do the same but in Resources instead

    <ListBox ...>
        <ListBox.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="10"/>
            </Style>
        </ListBox.Resources>
    <!--...-->
</ListBox>