WPF Expander - Изменить стиль - PullRequest
Новая
       2

WPF Expander - Изменить стиль

0 голосов
/ 09 ноября 2010

Я новичок в стилях 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 и удалил некоторые вещи.Я также пытался получить различный фон для двух состояний (один с градиентом, другой с прозрачным фоном).

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

Ответы [ 3 ]

0 голосов
/ 11 ноября 2010

Я теперь изменил свой подход. Наверное, я только что нашел код, который дизайнер 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>

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

0 голосов
/ 17 сентября 2018 
ExpanderDownHeaderStyle

Пользовательская стрелка сверху или снизу изменяет путь

Верхний путь стрелки: 

Data="M 0 0 L 10 10 L 20 0"

Путь к нижней стрелке: 

Data="M 20 12 L 10 0 L 0 12"
0 голосов
/ 09 ноября 2010

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

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