WPF UI开发教程自定义可折叠菜单控件_wpf菜单控件_有技巧搬砖的博客

相关文章推荐

坚韧的伤痕 · Trigger installation ...· 1 月前 ·

瘦瘦的绿茶 · 在Hologres中创建表和索引_实时数仓 ...· 10 月前 ·

瘦瘦的小马驹 · Datagrid ...· 1 年前 ·

豪爽的小狗 · 你选择的项目不可用或已被删除_百度知道· 1 年前 ·

健身的匕首 · Ionic远程开发调试 - harmful ...· 1 年前 ·

Expander控件有一个箭头按钮。单击箭头时，Expander中的子元素将显示或隐藏。箭头“展开”控件，使其子控件可见。

接下来，我们可以在扩展器中添加元素——这些元素将被扩展器箭头隐藏或显示。在这里，我向扩展器添加了一个 ImageRadioButton 按钮。

注意我修改了 Expander 元素的“Header”属性。单击此处的扩展器会显示说明。

IsExpanded 我将 IsExpanded 属性修改为 false。这意味着当程序启动时，描述是不可见的。

TextBlock 在 TextBlock 上，我修改了“Text”属性和“Margin”属性——这些并不重要。

展开方向。 Expander 上的一个重要选项是 ExpandDirection。这可以设置为向下、向左、向右或向上。箭头将更改为指向指定的方向。然后，内容在该区域中扩展。

在这个示例中 屏幕截图中，我使用了右扩展方向。单击箭头后，出现在右侧。

先看下Expander自定义样式代码：

<Style TargetType="{x:Type Expander}">
        <Setter Property="Cursor" Value="Hand" />
        <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"
                                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.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="-90" />
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse
                                                                    x:Name="circle"
                                                                    Width="19"
                                                                    Height="19"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Fill="White"
                                                                    Stroke="#FF333333" />
                                                                    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.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="180" />
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse
                                                                    x:Name="circle"
                                                                    Width="19"
                                                                    Height="19"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Fill="White"
                                                                    Stroke="#FF333333" />
                                                                    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.LayoutTransform>
                                                                    <TransformGroup>
                                                                        <RotateTransform Angle="90" />
                                                                    </TransformGroup>
                                                                </Grid.LayoutTransform>
                                                                <Ellipse
                                                                    x:Name="circle"
                                                                    Width="19"
                                                                    Height="19"
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    Fill="White"
                                                                    Stroke="#FF333333" />
                                                                    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>

Cursor光标样式是Hand，FocusVisualStyle焦点样式为空，HorizontalContentAlignment和VerticalContentAlignment对齐为填充，SnapsToDevicePixels转换给设备像素显示，Content="{TemplateBinding Header}"绑定头部内容，DockPanel.Dock="Top" 默认显示在顶部，IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"> 选择时绑定IsExpanded是否折叠或隐藏，当折叠IsExpanded=True，下拉内容显示出来，设置ExpandDirection等于上下左右时显示不同布局，这里可根据自己需求自己改变样式。

调用示例代码：

<Expander
                            Margin="0,10,0,0"
                            Header="收藏的歌单"
                            IsExpanded="False">
                            <StackPanel>
                                <controls:ImageRadioButton
                                    Content="Dream.Machine 1"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_MusicList}"
                                    ImageWidth="16"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
                                <controls:ImageRadioButton
                                    Content="Dream.Machine 2"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_MusicList}"
                                    ImageWidth="16"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
                                <controls:ImageRadioButton
                                    Content="Dream.Machine 3"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_MusicList}"
                                    ImageWidth="16"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
                                <controls:ImageRadioButton
                                    Content="Dream.Machine 4"
                                    GroupName="Menu"
                                    Image="{StaticResource Icon_MusicList}"
                                    ImageWidth="16"
                                    IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
                            </StackPanel>
                        </Expander>

推荐一款WPF MVVM框架开源项目：Newbeecoder.UI

Newbeecoder.UI开源项目

Demo下载：

Newbeecoder.UI开源项目 https://share.weiyun.com/py6W1dcK

<Window x:Class="exSplitter.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://sc... Menu 是一个控件，使用该控件可以对那些与命令或事件处理程序相关联的元素以分层方式进行组织。每个 Menu 可以包含多个 Men uI tem 控件。每个Men uI tem 都可调用命令或调用 Click 事件处理程序。Men uI tem 也可以有多个 Men uI tem 元素作为子项，从而构成子菜单。控件是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的... 前面一篇玩耍了一下登录实现效果;今天在原来的基础上来玩耍一下伸缩面板的效果;闲话不多扯直接看效果:1、关于前台简单布局:2、左侧面板伸缩动画：<Storyboard x:Key="ShowConfigSb"> <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Framewo... 界面样式选用了Materail Desgin UI ，十分好用，外观漂亮，开发常规需求，足够使用了。 Xmal中的布局，其中有一列"menuLeft" 双向绑定了ViewModel里的MenuWidth属性, GridSplitter左右拖拽时动态改变了MenuWidth属性值； <Grid Grid.Row="2"> public class MyButton : Button public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof( 资源下载此资源下载价格为2D币，请先登录资源文件列表 WPF ╒█╡■▓╦╡Ñ/ Wpf Application1/.vs/ Wpf Application1/v14/.suo,58880 WPF ╒█╡■▓╦╡Ñ/ Wpf Application1/ Wpf Application1.sln,1012 WPF ╒█╡■▓╦╡Ñ/ Wpf Application1/ Wpf Application1/App.xaml,3... <Border.ContextMenu> <ContextMenu> <Men uI tem Header="修改文字内容" Click="ModifyTextClick"></Men uI tem> <Men uI tem Header="删除" Click="DeleteClick"></Men uI tem> </ContextM