WPF Expander - Modify Style_问答_开发者_运维开发者技术经验分享

I'm new to the WPF styles and how they work exactly. So this is really a beginners question.

I used Expression Blend to create a Template using "Edit a copy...". This gives me a huge amount of XAML statements. I went on to edit those statements but didn't get the effect I wanted.

I want to modify the Expander Up and Down States (Left, Right not necessary).

Here is what I got, mostly from 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 VerticalContentA开发者_运维百科lignment}"/>
    <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>

I modified the Path value and deleted some stuff. I also tried to get a different Background for the two states (one with gradient, one with transparent background).

Any advise what I'm doing wrong or how this should be done in general?

You need to set your Template in your Trigger.

<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>

I've now changed my approach. I guess I just found the code that the Expression Blend designer generates kind of irritating.

For example I wanted to changed the style of toggle button when Up and Down. I created a single style for both up and down and created triggers inside that style that modify the appearance of the Button.

Code:

<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>

I did the same for other properties that I wanted to be changed.