自定義列表框項目風格

Question

我有象下面這樣的風格：

<!-- ListBox ItemTemplate style. --> 
     <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="BorderThickness" Value="0"/> 
      <Setter Property="BorderBrush" Value="Transparent"/> 
      <Setter Property="Padding" Value="0"/> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
      <Setter Property="VerticalContentAlignment" Value="Center"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListBoxItem"> 
         <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="MouseLeave"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="SelectionStates"> 
            <VisualState x:Name="Unselected"/> 
            <VisualState x:Name="Selected"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="FocusStates"> 
            <VisualState x:Name="Focused"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unfocused"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentControl x:Name="ContentContainer" 
              ContentTemplate="{TemplateBinding ContentTemplate}" 
              Content="{TemplateBinding Content}" 
              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
              Margin="{TemplateBinding Padding}" 
              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          <Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/> 
          <Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/> 
          <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

此設置爲我的列表框這樣的：

<ListBox Name="listBox" 
      HorizontalAlignment="Stretch" 
      ItemContainerStyle="{StaticResource ListBoxItemStyle}" 
      ItemTemplate="{StaticResource DefaultDataTemplate}" 
    <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
      </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    </ListBox> 

現在ItemTemplate="{StaticResource DefaultDataTemplate}"就像下面;

<DataTemplate x:Key="DefaultDataTemplate"> 
      <Border x:Name="ListItemBorder" 
        Margin="0,2,0,0" 
        VerticalAlignment="Stretch" 
        HorizontalAlignment="Stretch" 
        Background="{Binding Converter={StaticResource AnswerCellBackgroundConvertor}}"> 

///ITems 

</Border> 
     </DataTemplate> 

正如你可以看到我已經設置DataTemplate Background爲默認好了，所以我需要兩個風格和轉換器存在。

問題

當我點擊該項目在列表框中的樣式或邊框是在上面，像下面的圖片展示。如何將其設置爲背景？

圖片在這裏;

我怎樣才能解決這個問題？

Answer 1

我沒有退出理解完整的問題，但是如果您不想讓ListBoxItem的內容與ItemTemplate完全相同，請用ContentPresenter替換ContentControl。

<ControlTemplate> 
    <Grid> 

    <Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/> 
    <Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/> 
    <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/> 
    <ContentPresenter /> 
    </Grid> 

<Grid>     
     <Border BorderBrush="#d2c2f9" BorderThickness="1"> 
      <ContentPresenter /> 
     </Border> 

     <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>   
    </Grid> 

編輯2：刪除ItemTemplate中設置了二傳手的ListBoxItem的背景與您的轉換器結合，並在你的模板將網格的Backgorund勢必它的模板父的背景。

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> 

     <!-- this --> 
     <Setter Property="Background" Value="{Binding Path=Content,Converter={StaticResource AnswerCellBackgroundConvertor}}"/> 


     <Setter Property="BorderThickness" Value="0"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ListBoxItem"> 
        <!-- and this Background--> 
        <Grid x:Name="LayoutRoot" 
          Background="{TemplateBinding Background}" 
          HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="MouseLeave"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualState x:Name="Unselected"/> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unfocused"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 

         <ContnerPresenter /> 
         <Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/> 
         <Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/> 
         <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>