在ControlTemplate中更改內部元素的顏色

Question

我有一個Combobox的模板，代碼主要來自msdn documentation。 當禁用組合框時，我想將箭頭的顏色更改爲灰色。 有什麼想法？

下面的代碼：

<!--ComboBoxStyle--> 
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> 
    <Grid DataContext="{Binding}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition Width="20" /> 
     </Grid.ColumnDefinitions> 
     <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" /> 
     <Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/> 
     <ContentControl Content="{Binding ComboPath}"/> 
     <Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" 
       Data="M 0 0 L 4 4 L 8 0 Z" Fill="{StaticResource AlpmRed}"/> 
    </Grid> 
</ControlTemplate> 

<ControlTemplate x:Key="ComboBoxTextBox" 
      TargetType="{x:Type TextBox}"> 
    <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" /> 
</ControlTemplate> 

<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}"> 
    <Setter Property="SnapsToDevicePixels" Value="true" /> 
    <Setter Property="OverridesDefaultStyle" Value="true" /> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="ScrollViewer.CanContentScroll" Value="true" /> 
    <Setter Property="MinWidth" Value="30" /> 
    <Setter Property="MinHeight" Value="20" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBox}"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="MouseOver" /> 
          <VisualState x:Name="Disabled"/> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="EditStates"> 
          <VisualState x:Name="Editable"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
              Storyboard.TargetName="PART_EditableTextBox"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
              Storyboard.TargetName="ContentSite"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Uneditable" /> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" 
            Focusable="false" 
            ClickMode="Press" 
            IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, 
            RelativeSource={RelativeSource TemplatedParent}}" DataContext="{Binding}" /> 
        <ContentPresenter x:Name="ContentSite" 
             IsHitTestVisible="False" 
             Content="{TemplateBinding SelectionBoxItem}" 
             ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
             ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
             Margin="3,3,23,3" 
             VerticalAlignment="Stretch" 
             HorizontalAlignment="Left"> 
        </ContentPresenter> 
        <TextBox x:Name="PART_EditableTextBox" 
          Style="{x:Null}" 
          Template="{StaticResource ComboBoxTextBox}" 
          HorizontalAlignment="Left" 
          VerticalAlignment="Bottom" 
          Margin="3,3,23,3" 
          Focusable="True" 
          Background="Transparent" 
          Visibility="Hidden" 
          IsReadOnly="{TemplateBinding IsReadOnly}" /> 
        <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" 
          Focusable="False" PopupAnimation="Slide"> 
         <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" 
                      MaxHeight="{TemplateBinding MaxDropDownHeight}"> 
          <Border x:Name="DropDownBorder" BorderThickness="1"> 
           <Border.BorderBrush> 
            <SolidColorBrush Color="{StaticResource AlpmColorLightGray}" /> 
           </Border.BorderBrush> 
           <Border.Background> 
            <SolidColorBrush Color="White" /> 
           </Border.Background> 
          </Border> 
          <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"> 
           <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /> 
          </ScrollViewer> 
         </Grid> 
        </Popup> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}"> 
    <Setter Property="SnapsToDevicePixels" Value="true" /> 
    <Setter Property="OverridesDefaultStyle" Value="true" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
       <Border x:Name="Border" Padding="2" SnapsToDevicePixels="true" Background="White"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualState x:Name="Unselected" /> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedUnfocused"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter /> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

我認爲最好的辦法是在形狀填充綁定到切換按鈕的前景，你可以做的每個實例，或所有組合框中使用這個控制模板;這個解決方案採用後者：

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> 
    <Grid DataContext="{Binding}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition Width="20" /> 
     </Grid.ColumnDefinitions> 
     <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" /> 
     <Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/> 
     <ContentControl Content="{Binding ComboPath}"/> 
     <Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" 
       Data="M 0 0 L 4 4 L 8 0 Z" Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"> 
     </Path> 
    </Grid>    
    <ControlTemplate.Triggers>     
     <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="False"> 
      <Setter Property="Foreground" Value="{StaticResource AlpmGray}"></Setter> 
     </DataTrigger> 
     <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="True"> 
      <Setter Property="Foreground" Value="{StaticResource AlpmRed}"></Setter> 
     </DataTrigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

此結合填充到TemplatedParent（在這種情況下，切換按鈕），因此按鈕的啓用狀態（通常依賴於父控制）。