WPF Expander - Modify Style

Question

Я новичок в стилях WPF и как они работают. Так что это действительно вопрос начинающих.

Я использовал Expression Blend, чтобы создать шаблон с помощью «Редактировать копию ...». Это дает мне огромное количество заявлений XAML. Я продолжал редактировать эти утверждения, но не получил эффекта, который я хотел.

Я хочу, чтобы изменить Расширение вверх и вниз (Слева направо не нужно).

Вот что я получил, в основном из Expression Blend:

<Window.Resources> 
    <Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border Padding="{TemplateBinding Padding}"> 
         <Grid SnapsToDevicePixels="False" Height="25"> 
          <Grid.Background> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFEFEFEF" Offset="0.326"/> 
            <GradientStop Color="#FF9F9F9F" Offset="1"/> 
           </LinearGradientBrush> 
          </Grid.Background> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="40"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/> 
          <Path x:Name="arrow" Data="M 0,2 H 10,10" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"> 

          </Path> 
          <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 

         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#222"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/> 
          <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ExpanderUpHeaderStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border Padding="{TemplateBinding Padding}"> 
         <Grid SnapsToDevicePixels="False" Height="25" Background="Transparent"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="40"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/> 
          <Path x:Name="arrow" Data="M 0,5 H 10,10 M 5,0 L 5,10" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"> 
          </Path> 
          <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 

         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#222"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/> 
          <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ExpanderTemplate2" TargetType="{x:Type Expander}"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 

     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="BorderBrush" Value="Black"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Padding" Value="0,0,0,0"/> 
     <Setter Property="Template"> 
<Setter.Value> 
<ControlTemplate TargetType="{x:Type Expander}"> 
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="true"> 
    <DockPanel> 
    <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
    <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
    </DockPanel> 
    </Border> 
    <ControlTemplate.Triggers> 
    <Trigger Property="IsExpanded" Value="true"> 
    <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/> 
    </Trigger> 
    <Trigger Property="ExpandDirection" Value="Up"> 
    <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/> 
    <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/> 
    <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderUpHeaderStyle}"/> 
    </Trigger> 
    <Trigger Property="IsEnabled" Value="false"> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
    </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 
</Setter.Value> 

Я изменил значение Path и удалены некоторые вещи. Я также попытался получить другой фон для двух состояний (один с градиентом, один с прозрачным фоном).

Любой совет, что я делаю неправильно или как это должно быть сделано в целом?

Answer 1

Теперь я изменил свой подход. Наверное, я просто нашел код, созданный дизайнером Expression Blend.

Например, я хотел изменить стиль кнопки переключения, когда Вверх и Вниз. Я создал один стиль для вверх и вниз и создал триггеры внутри этого стиля, которые изменяют внешний вид кнопки.

Код:

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton"> 
    <Path Name="Triangle" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 10 10 L 20 0 Z" Fill="Black" /> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsChecked" Value="true"> 
      <Setter TargetName="Triangle" Property="Data" Value="M 0 10 L 10 0 L 20 10 Z" /> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Я сделал то же самое для других свойств, которые я хотел изменить.

Answer 2

Вам необходимо установить свой шаблон в свой триггер.

<ControlTemplate.Triggers> 
    <!-- This is your Trigger Condition --> 
    <Trigger Property="IsExpanded" Value="true"> 
     <!-- This is what happens when condition is met - Right now it is just showing the ExpandSite --> 
     <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/> 

     <!--What is should do is modify the Template of the control to use a different one 
      Not really sure what part of the control you want to modify, but this is the general idea --> 
     <Setter Property="Template" Value="..." TargetName="..." /> 
    </Trigger> 
</ControlTemplate.Triggers>