WPF UI开发教程Expander不折叠样式

92 篇文章 9 订阅
92 篇文章 23 订阅

上一篇文章讲解了Expander控件有一个带箭头按钮。单击箭头时,Expander中的子元素将显示或隐藏。

这篇文章讲一下不带箭头Expander扩展样式控件,先截图看一下控件效果。

不带箭头的样式和带箭头按钮样式是差不多,区别点在把名称ExpandSite的控件显示不可见,样式代码如下:

<Style x:Key="NoExpander" TargetType="{x:Type Expander}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Foreground" Value="#383838" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <Border SnapsToDevicePixels="True">
                        <DockPanel>
                            <ToggleButton
                                x:Name="HeaderSite"
                                MinWidth="0"
                                IsEnabled="False"
                                MinHeight="0"
                                FocusVisualStyle="{x:Null}"
                                Padding="{TemplateBinding Padding}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Header}"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                DockPanel.Dock="Top"
                                FontFamily="{TemplateBinding FontFamily}"
                                FontSize="{TemplateBinding FontSize}"
                                FontStretch="{TemplateBinding FontStretch}"
                                FontStyle="{TemplateBinding FontStyle}"
                                FontWeight="{TemplateBinding FontWeight}"
                                Foreground="{TemplateBinding Foreground}"
                                Style="{StaticResource ToggleButtonStyle}"
                                IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                            </ToggleButton>
                            <ContentPresenter
                                x:Name="ExpandSite"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Content}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                DockPanel.Dock="Bottom"
                                Focusable="False"
                                Visibility="Collapsed" />
                        </DockPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Right">
                            <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Right" />
                            <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Left" />
                            <Setter TargetName="HeaderSite" Property="Style">
                                <Setter.Value>
                                    <Style TargetType="{x:Type ToggleButton}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                                    <Border Padding="{TemplateBinding Padding}">
                                                        <Grid Background="Transparent" SnapsToDevicePixels="False">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="19" />
                                                                <RowDefinition Height="*" />
                                                            </Grid.RowDefinitions>
                                                            <Grid>
                                                                <Grid.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="-90" />
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse
                                                                    x:Name="circle"
                                                                    Width="19"
                                                                    Height="19"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Fill="White"
                                                                    Stroke="#FF333333" />
                                                                <Path
                                                                    x:Name="arrow"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Data="M1,1.5L4.5,5 8,1.5"
                                                                    SnapsToDevicePixels="False"
                                                                    Stroke="#FF333333"
                                                                    StrokeThickness="2" />
                                                            </Grid>
                                                            <ContentPresenter
                                                                Grid.Row="1"
                                                                Margin="0,4,0,0"
                                                                HorizontalAlignment="Center"
                                                                VerticalAlignment="Top"
                                                                Content="{TemplateBinding Content}"
                                                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                RecognizesAccessKey="True"
                                                                SnapsToDevicePixels="True" />
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter TargetName="arrow" Property="Data" Value="M1,4.5L4.5,1 8,4.5" />
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FF5593FF" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFF3F9FF" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="Black" />
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FF3C77DD" />
                                                            <Setter TargetName="circle" Property="StrokeThickness" Value="1.5" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFD9ECFF" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="Black" />
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FFBCBCBC" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFE6E6E6" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="#FF707070" />
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Up">
                            <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Top" />
                            <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Bottom" />
                            <Setter TargetName="HeaderSite" Property="Style">
                                <Setter.Value>
                                    <Style TargetType="{x:Type ToggleButton}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                                    <Border Padding="{TemplateBinding Padding}">
                                                        <Grid Background="Transparent" SnapsToDevicePixels="False">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="19" />
                                                                <ColumnDefinition Width="*" />
                                                            </Grid.ColumnDefinitions>
                                                            <Grid>
                                                                <Grid.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="180" />
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse
                                                                    x:Name="circle"
                                                                    Width="19"
                                                                    Height="19"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Fill="White"
                                                                    Stroke="#FF333333" />
                                                                <Path
                                                                    x:Name="arrow"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Data="M1,1.5L4.5,5 8,1.5"
                                                                    SnapsToDevicePixels="False"
                                                                    Stroke="#FF333333"
                                                                    StrokeThickness="2" />
                                                            </Grid>
                                                            <ContentPresenter
                                                                Grid.Column="1"
                                                                Margin="4,0,0,0"
                                                                HorizontalAlignment="Left"
                                                                VerticalAlignment="Center"
                                                                Content="{TemplateBinding Content}"
                                                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                RecognizesAccessKey="True"
                                                                SnapsToDevicePixels="True" />
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter TargetName="arrow" Property="Data" Value="M1,4.5L4.5,1 8,4.5" />
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FF5593FF" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFF3F9FF" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="Black" />
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FF3C77DD" />
                                                            <Setter TargetName="circle" Property="StrokeThickness" Value="1.5" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFD9ECFF" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="Black" />
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FFBCBCBC" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFE6E6E6" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="#FF707070" />
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Left">
                            <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Left" />
                            <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Right" />
                            <Setter TargetName="HeaderSite" Property="Style">
                                <Setter.Value>
                                    <Style TargetType="{x:Type ToggleButton}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                                    <Border Padding="{TemplateBinding Padding}">
                                                        <Grid Background="Transparent" SnapsToDevicePixels="False">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="19" />
                                                                <RowDefinition Height="*" />
                                                            </Grid.RowDefinitions>
                                                            <Grid>
                                                                <Grid.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="90" />
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse
                                                                    x:Name="circle"
                                                                    Width="19"
                                                                    Height="19"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Fill="White"
                                                                    Stroke="#FF333333" />
                                                                <Path
                                                                    x:Name="arrow"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Data="M1,1.5L4.5,5 8,1.5"
                                                                    SnapsToDevicePixels="False"
                                                                    Stroke="#FF333333"
                                                                    StrokeThickness="2" />
                                                            </Grid>
                                                            <ContentPresenter
                                                                Grid.Row="1"
                                                                Margin="0,4,0,0"
                                                                HorizontalAlignment="Center"
                                                                VerticalAlignment="Top"
                                                                Content="{TemplateBinding Content}"
                                                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                RecognizesAccessKey="True"
                                                                SnapsToDevicePixels="True" />
                                                        </Grid>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter TargetName="arrow" Property="Data" Value="M1,4.5L4.5,1 8,4.5" />
                                                        </Trigger>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FF5593FF" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFF3F9FF" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="Black" />
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FF3C77DD" />
                                                            <Setter TargetName="circle" Property="StrokeThickness" Value="1.5" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFD9ECFF" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="Black" />
                                                        </Trigger>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter TargetName="circle" Property="Stroke" Value="#FFBCBCBC" />
                                                            <Setter TargetName="circle" Property="Fill" Value="#FFE6E6E6" />
                                                            <Setter TargetName="arrow" Property="Stroke" Value="#FF707070" />
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

主要区别是这段代码:

<ContentPresenter
                                x:Name="ExpandSite"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Content}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                DockPanel.Dock="Bottom"
                                Focusable="False"
                                Visibility="Collapsed" />

DockPanel.Dock="Bottom" 在底部显示,Focusable="False"没有焦点,Visibility="Collapsed"不可见,把向下箭头就隐藏了。

调用示例代码把样式style="{StaticResource NoExpander}"加上,容器里面添加任意子控件就行了:

<Expander
                            Header="推荐"
                            IsExpanded="True"
                            Style="{StaticResource NoExpander}">
                            <StackPanel>
                                <controls:ImageRadioButton
                                    Content="发现音乐"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_FindMusic}"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=FindMusic}" />
                                <controls:ImageRadioButton
                                    Content="私人FM"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_FM}"
                                    ImageHeight="14"
                                    ImageWidth="18"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
                                <controls:ImageRadioButton
                                    Content="视频"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_Video}"
                                    ImageHeight="12"
                                    ImageWidth="18"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
                                <controls:ImageRadioButton
                                    Content="朋友"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_Group}"
                                    ImageWidth="20"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
                            </StackPanel>
                        </Expander>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值