WPF選擇列表框項目與自定義邊框

Question

我想創建一個ListBoxItem模板，將與選擇圓角邊框。 我得到這個XAML，這不會對選擇工作：

<ListBox x:Name="filtersListBox" Grid.Row="1" 
     Background="Transparent" BorderThickness="0" 
     ItemsSource="{Binding FilterItems}"> 
    <ListBox.ItemContainerStyle> 
     <Style TargetType="{x:Type ListBoxItem}"> 
      <Style.Resources> 
       <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> 
       <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/> 
      </Style.Resources> 
     </Style> 
    </ListBox.ItemContainerStyle> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Grid HorizontalAlignment="Center"> 
       <Border CornerRadius="8" BorderThickness="0" BorderBrush="Orange" 
         Margin="2" Background="Transparent" Name="itemBorder" 
         Width="275" VerticalAlignment="Center" 
         FocusManager.IsFocusScope="True" Focusable="True"> 
        <Border.Effect> 
         <DropShadowEffect BlurRadius="1" ShadowDepth="2" Color="DarkOrange" Opacity="0.3"/> 
        </Border.Effect> 
        <Border.Style> 
         <Style TargetType="Border"> 
          <Style.Triggers> 
           <Trigger Property="UIElement.IsFocused" Value="True"> 
            <Setter Property="Background" Value="Blue"/> 
           </Trigger> 
           <EventTrigger RoutedEvent="Border.MouseEnter"> 
            <BeginStoryboard> 
             <Storyboard> 
              <ThicknessAnimation Duration="0:0:0.25" 
                   To="2" 
                   Storyboard.TargetProperty="BorderThickness"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </EventTrigger> 
           <EventTrigger RoutedEvent="Border.MouseLeave"> 
            <BeginStoryboard> 
             <Storyboard> 
              <ThicknessAnimation Duration="0:0:0.25" 
                   To="0" 
                   Storyboard.TargetProperty="BorderThickness"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </EventTrigger> 
          </Style.Triggers> 
         </Style> 
        </Border.Style> 
        <TextBlock Text="{Binding Text}" Margin="10, 2"/> 
       </Border> 
      </Grid> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

所以這是我的工作列表框。
MouseEnter和MouseLeave事件，效果很好！
但是，UIElement.IsFocused的觸發器不起作用。

任何意見將不勝感激！ :)
謝謝，亞歷克斯。

Answer 1

這是很容易做到的，我很驚訝，沒有人提出這個呢。定義兩個DataTemplate s或兩個ControlTemplate s，一個用於默認外觀，另一個用於所選外觀。然後，只需添加此Style（第一個例子中使用DataTemplate S）：

<Style x:Key="SelectionStyle" TargetType="{x:Type ListBoxItem}"> 
    <Setter Property="ContentTemplate" Value="{StaticResource DefaultTemplate}" /> 
    <Style.Triggers> 
     <Trigger Property="IsSelected" Value="True"> 
      <Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}" /> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

你會使用這樣的：

<ListBox ItemContainerStyle="{StaticResource SelectionStyle}" ... /> 

下面是使用兩個ControlTemplate S（其它例如，在相同的方式使用）：

<Style x:Key="SelectionStyle" TargetType="{x:Type ListBoxItem}"> 
    <Setter Property="Template" value="{StaticResource DefaultTemplate}" /> 
    <Style.Triggers> 
     <Trigger Property="IsSelected" Value="True"> 
      <Setter Property="Template" value="{StaticResource SelectedTemplate}" /> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

我會讓你定義你想要的項目看起來像你所知道的最好的。最後一個註釋...如果您使用此方法（使用ControlTemplate s），請確保您添加ContentPresenter，以便仍會顯示項目的內容。有關示例，請參閱MSDN上的Control.Template Property頁面。

Answer 2

您是否嘗試將Focusable屬性設置爲true。默認情況下，僞指令是錯誤的。

看看這個鏈接：

http://msdn.microsoft.com/en-us/library/system.windows.uielement.focusable%28v=vs.110%29.aspx

如果那不幫助，那麼也許這種做法會更適合你。

<ListBox.Resources> 
    <Style TargetType="{x:Type ListBoxItem}"> 
     <EventSetter Event="GotFocus" Handler="ListBoxItem_GotFocus"/> 
     <EventSetter Event="LostFocus" Handler="ListBoxItem_LostFocus"/> 
    </Style> 
</ListBox.Resources> 

Answer 3

爲什麼不設置Template for ItemContainerStyle，那麼你可以使用觸發器的屬性IsSelected = true。請參見下面的代碼：

<Window x:Class="WpfApplication7.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:system="clr-namespace:System;assembly=mscorlib" 
    xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.Resources> 
    <collections:ArrayList x:Key="StringArray"> 
     <system:String>Hei</system:String> 
     <system:String>Hei</system:String> 
     <system:String>Hei</system:String> 
     <system:String>Hei</system:String> 
    </collections:ArrayList> 
</Window.Resources> 
<Grid> 
    <ListBox x:Name="filtersListBox" Grid.Row="1" 
    Background="Transparent" BorderThickness="0" 
    ItemsSource="{StaticResource StringArray}"> 
     <ListBox.ItemContainerStyle> 
      <Style TargetType="{x:Type ListBoxItem}"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ListBoxItem"> 
          <Border CornerRadius="8" BorderThickness="0" BorderBrush="Orange" 
        Margin="2" Background="Transparent" Name="itemBorder" 
        Width="275" VerticalAlignment="Center" 
        FocusManager.IsFocusScope="True" Focusable="True"> 
           <Border.Effect> 
            <DropShadowEffect BlurRadius="1" ShadowDepth="2" Color="DarkOrange" Opacity="0.3"/> 
           </Border.Effect> 
           <ContentPresenter /> 
          </Border> 
            <ControlTemplate.Triggers> 
             <Trigger Property="IsSelected" Value="True"> 
              <Setter TargetName="itemBorder" Property="Background" Value="Blue"></Setter> 
             </Trigger> 
            </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
       <Style.Resources> 
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> 
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/> 
       </Style.Resources> 
      </Style> 
     </ListBox.ItemContainerStyle> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Grid HorizontalAlignment="Center"> 
        <Border CornerRadius="8" BorderThickness="0" BorderBrush="Orange" 
        Margin="2" Background="Transparent" Name="itemBorder" 
        Width="275" VerticalAlignment="Center" 
        FocusManager.IsFocusScope="True" Focusable="True"> 
         <Border.Effect> 
          <DropShadowEffect BlurRadius="1" ShadowDepth="2" Color="DarkOrange" Opacity="0.3"/> 
         </Border.Effect> 
         <Border.Style> 
          <Style TargetType="Border"> 
           <Style.Triggers> 
            <Trigger Property="UIElement.IsFocused" Value="True"> 
             <Setter Property="Background" Value="Blue"/> 
            </Trigger> 
            <EventTrigger RoutedEvent="Border.MouseEnter"> 
             <BeginStoryboard> 
              <Storyboard> 
               <ThicknessAnimation Duration="0:0:0.25" 
                  To="2" 
                  Storyboard.TargetProperty="BorderThickness"/> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
            <EventTrigger RoutedEvent="Border.MouseLeave"> 
             <BeginStoryboard> 
              <Storyboard> 
               <ThicknessAnimation Duration="0:0:0.25" 
                  To="0" 
                  Storyboard.TargetProperty="BorderThickness"/> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
           </Style.Triggers> 
          </Style> 
         </Border.Style> 
         <TextBlock Text="{Binding }" Margin="10, 2"/> 
        </Border> 
       </Grid> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
</Grid>