locked
How to change the focus visual style of a ListBox that's using a DataTemplate? RRS feed

  • Question

  • Hello, I'm trying to change the visual style of the focus of a listbox items and I'm having a hard time. I made a simple example to illustrate:

    Window.xaml:
    1<Window x:Class="TestFocus.Window1" 
    2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4    Title="Window1" Height="640" Width="480" Loaded="Window_Loaded"
    5    <Window.Resources> 
    6        <DataTemplate x:Key="listTemplate"
    7            <WrapPanel> 
    8                <Border Margin="20"
    9                    <TextBlock Text="{Binding Title}"></TextBlock> 
    10                </Border> 
    11            </WrapPanel> 
    12        </DataTemplate> 
    13    </Window.Resources> 
    14    <Grid> 
    15        <ListBox x:Name="control"  
    16                 ItemTemplate="{StaticResource listTemplate}"
    17        </ListBox> 
    18    </Grid> 
    19</Window> 


    Window.xaml.cs:
    1public class MonthItem 
    2    { 
    3        public MonthItem() { } 
    4        public int Id { getset; } 
    5        public string Title { getset; } 
    6    } 
    7     
    8    /// <summary> 
    9    /// Interaction logic for Window1.xaml 
    10    /// </summary> 
    11    public partial class Window1 : Window 
    12    { 
    13        public Window1() 
    14        { 
    15            InitializeComponent(); 
    16 
    17        } 
    18 
    19        private void Window_Loaded(object sender, RoutedEventArgs e) 
    20        { 
    21            List<MonthItem> items = new List<MonthItem>(); 
    22            items.Add(new MonthItem() { Id = 1, Title = "January"}); 
    23            items.Add(new MonthItem() { Id = 2, Title = "February"}); 
    24            items.Add(new MonthItem() { Id = 3, Title = "March" }); 
    25            items.Add(new MonthItem() { Id = 4, Title = "April" }); 
    26            items.Add(new MonthItem() { Id = 5, Title = "May" }); 
    27 
    28            this.control.ItemsSource = items; 
    29        } 
    30 
    31    } 

    How can I make the focused and selected Item on the listbox have a red border instead of the black dotted line with blue background? Thank you very much for your help.




    Monday, December 1, 2008 9:03 PM

Answers

  • You can manipulate the ItemContainerStyle of ListBox, as shown below:

    <Style x:Key="listItemFocusVisualStyle">  
       <Setter Property="Control.Template">  
          <Setter.Value> 
             <ControlTemplate> 
                <Rectangle SnapsToDevicePixels="true" Stroke="Red" StrokeThickness="1" /> 
             </ControlTemplate> 
          </Setter.Value> 
       </Setter> 
    </Style> 
     
    <Style x:Key="listContainerStyle" TargetType="ListBoxItem">  
       <Setter Property="FocusVisualStyle" Value="{StaticResource listItemFocusVisualStyle}" /> 
       <Setter Property="BorderThickness" Value="1" /> 
       <Setter Property="Template">  
          <Setter.Value> 
             <ControlTemplate TargetType="{x:Type ListBoxItem}">  
                <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">  
                   <ContentPresenter ContentSource="Content" /> 
                </Border> 
             </ControlTemplate> 
          </Setter.Value> 
       </Setter> 
       <Style.Triggers> 
          <Trigger Property="IsSelected" Value="True">  
             <Setter Property="Background" Value="Transparent" /> 
             <Setter Property="BorderBrush" Value="Red" /> 
          </Trigger> 
       </Style.Triggers> 
    </Style> 
     
    ...  
     
    <ListBox x:Name="control" 
             ItemTemplate="{StaticResource listTemplate}" 
             ItemContainerStyle="{StaticResource listContainerStyle}" /> 
     

    BTW, you don't have to use "FocusVisualStyle" in this case, but I put it here as an example if you need to know how.

    HTH,

    Mark
    • Marked as answer by polmestra Tuesday, December 2, 2008 1:09 PM
    Monday, December 1, 2008 10:59 PM

All replies

  • You can manipulate the ItemContainerStyle of ListBox, as shown below:

    <Style x:Key="listItemFocusVisualStyle">  
       <Setter Property="Control.Template">  
          <Setter.Value> 
             <ControlTemplate> 
                <Rectangle SnapsToDevicePixels="true" Stroke="Red" StrokeThickness="1" /> 
             </ControlTemplate> 
          </Setter.Value> 
       </Setter> 
    </Style> 
     
    <Style x:Key="listContainerStyle" TargetType="ListBoxItem">  
       <Setter Property="FocusVisualStyle" Value="{StaticResource listItemFocusVisualStyle}" /> 
       <Setter Property="BorderThickness" Value="1" /> 
       <Setter Property="Template">  
          <Setter.Value> 
             <ControlTemplate TargetType="{x:Type ListBoxItem}">  
                <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">  
                   <ContentPresenter ContentSource="Content" /> 
                </Border> 
             </ControlTemplate> 
          </Setter.Value> 
       </Setter> 
       <Style.Triggers> 
          <Trigger Property="IsSelected" Value="True">  
             <Setter Property="Background" Value="Transparent" /> 
             <Setter Property="BorderBrush" Value="Red" /> 
          </Trigger> 
       </Style.Triggers> 
    </Style> 
     
    ...  
     
    <ListBox x:Name="control" 
             ItemTemplate="{StaticResource listTemplate}" 
             ItemContainerStyle="{StaticResource listContainerStyle}" /> 
     

    BTW, you don't have to use "FocusVisualStyle" in this case, but I put it here as an example if you need to know how.

    HTH,

    Mark
    • Marked as answer by polmestra Tuesday, December 2, 2008 1:09 PM
    Monday, December 1, 2008 10:59 PM
  • Thank you very much Mark! I did not know the ItemContainterStyle property.
    Tuesday, December 2, 2008 1:09 PM