备案控制台
开发者社区 开发与运维 文章 正文

WPF 自定义标题栏 自定义菜单栏

2018-09-25 2477
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF 自定义标题栏 自定义菜单栏 自定义标题栏 自定义列表，可以直接修改WPF中的ListBox模板，也用这样类似的效果。但是ListBox是不能设置默认选中状态的。 而我们需要一些复杂的UI效果，还是直接自定义控件来的快   GitHub下载地址：https://github.
原文: WPF 自定义标题栏 自定义菜单栏

自定义标题栏

自定义列表，可以直接修改WPF中的ListBox模板，也用这样类似的效果。但是ListBox是不能设置默认选中状态的。

而我们需要一些复杂的UI效果，还是直接自定义控件来的快

 

GitHub下载地址：https://github.com/Kybs0/MenuListControl

一、设计界面样式

<UserControl x:Class="WpfApplication6.TitleListControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="800" Loaded="TitleListControl_OnLoaded" >
    <UserControl.Resources>
        <Style x:Key="FirstButtonStyle" TargetType="RadioButton">
            <Setter Property="Margin" Value="0.5,2"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid>
                            <Border x:Name="ButtonBorder" Height="35" Width="100" Background="#FF286E9E" CornerRadius="15,0,0,15"></Border>
                            <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="ButtonBorder" Property="Background" Value="DeepSkyBlue"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="RadioButton">
                <Setter Property="Margin" Value="0.5,2"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RadioButton}">
                            <Grid>
                                <Border x:Name="ButtonBorder" Height="35" Width="100" Background="#FF286E9E"></Border>
                                <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ButtonBorder" Property="Background" Value="DeepSkyBlue"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        <Style x:Key="LastButtonStyle" TargetType="RadioButton">
                <Setter Property="Margin" Value="0.5,2"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RadioButton}">
                            <Grid>
                                <Border x:Name="ButtonBorder" Height="35" Width="100" Background="#FF286E9E" CornerRadius="0,15,15,0"></Border>
                                <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ButtonBorder" Property="Background" Value="DeepSkyBlue"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    </UserControl.Resources>
    <Grid>
        <Border x:Name="ControlBorder" VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="16,16,16,16">
            <Border.Background>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0.2"></GradientStop>
                    <GradientStop Color="DeepSkyBlue" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Border.Background>
            <StackPanel x:Name="SpTitleList" Orientation="Horizontal" Background="Transparent" Margin="2,0">
            </StackPanel>
        </Border>
    </Grid>
</UserControl>
View Code

 二、控件后台代码

public partial class TitleListControl : UserControl
    {
        public TitleListControl()
        {
            InitializeComponent();
        }
        /// <summary>
        /// get or set the items
        /// </summary>
        public List<TitleListItemModel> TitleListItems
        {
            get { return (List<TitleListItemModel>) GetValue(TitleListItemsProperty); }
            set{SetValue(TitleListItemsProperty,value);}
        }

        public static readonly DependencyProperty TitleListItemsProperty = DependencyProperty.Register("TitleListItems", typeof(List<TitleListItemModel>),
            typeof(TitleListControl),new PropertyMetadata(new List<TitleListItemModel>()));

        public UIElementCollection Items
        {
            get { return SpTitleList.Children; }
        }

        private void TitleListControl_OnLoaded(object sender, RoutedEventArgs e)
        {
            if (TitleListItems!=null)
            {
                var items = TitleListItems;
                int index = 0;
                foreach (var item in items)
                {
                    var radiaoButton=new RadioButton()
                    {
                        Content = item.Name
                    };

                    if (index == 0)
                    {
                        radiaoButton.Style = GetStyle("first");
                    }
                    else if (index == items.Count - 1)
                    {
                        radiaoButton.Style = GetStyle("last");
                    }
                    item.Index = index;
                    radiaoButton.DataContext = item;

                    radiaoButton.Checked += ToggleButton_OnChecked;

                    SpTitleList.Children.Add(radiaoButton);
                    index++;
                }
            }
        }

        private Style GetStyle(string type)
        {
            Style style = null;
            switch (type)
            {
                case "first":
                {
                    style = this.Resources["FirstButtonStyle"] as Style;
                }
                    break;
                case "last":
                {
                    style = this.Resources["LastButtonStyle"] as Style;
                }
                    break;
            }
            return style;
        }

        private void ToggleButton_OnChecked(object sender, RoutedEventArgs e)
        {
            var radioButton=sender as RadioButton;
            var dataModel=radioButton.DataContext as TitleListItemModel;
            int index = dataModel.Index;
            int count = SpTitleList.Children.Count;
            var linerBrush = new LinearGradientBrush(){StartPoint=new Point(0,1),EndPoint = new Point(1,1)};
            if (index==0)
            {
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.White,
                    Offset = 0.2
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 1
                });
            }
            else if (index == count - 1)
            {
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 0
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.White,
                    Offset = 0.8
                });
            }
            else
            {
                double offsetValue = Convert.ToDouble(index) / count;
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 0
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.White,
                    Offset = offsetValue
                });
                linerBrush.GradientStops.Add(new GradientStop()
                {
                    Color = Colors.DeepSkyBlue,
                    Offset = 1
                });
            }
            ControlBorder.Background = linerBrush;
        }
    }

    public class TitleListItemModel
    {
        public int Index { get; set; }
        public string Name { get; set; }
        public string Remark { get; set; }
    }
View Code

三、引用UserControl

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpfApplication6="clr-namespace:WpfApplication6"
        Title="MainWindow" Height="350" Width="800" Background="LightGray">
    <Grid>
        <wpfApplication6:TitleListControl VerticalAlignment="Center" HorizontalAlignment="Center">
            <wpfApplication6:TitleListControl.TitleListItems>
                <wpfApplication6:TitleListItemModel Name="综合" ></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="语音体验" ></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="网页浏览"></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="视频播放" ></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="综合覆盖"></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="速率性能"></wpfApplication6:TitleListItemModel>
                <wpfApplication6:TitleListItemModel Name="网络延时"></wpfApplication6:TitleListItemModel>
            </wpfApplication6:TitleListControl.TitleListItems>
        </wpfApplication6:TitleListControl>
    </Grid>
</Window>
View Code

 如需要控件的SelectionChanged方法，在UserControl中添加个委托或者注册一个事件即可。

文章标签：
C#
关键词：
wpf自定义
wpf自定义标题栏
wpf标题栏
wpf自定义标题栏自定义菜单
杰克.陈
目录
相关文章
杰克.陈
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式（Notification）——简单教程
原文:【WPF】右下角弹出自定义通知样式（Notification）——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
杰克.陈
2832 0
Wesky
|
前端开发 C# 图形学
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
Wpf开发过程中，最经常使用的功能之一，就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用，甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一，同样用处也非常广泛。
Wesky
796 0
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
nurmemet
|
C#
WPF 控件自定义背景
<!--控件要设置尺寸的话，设置的尺寸必须比下面的图形的尺寸要小，不然显示不开--> <Label Content="直角测试" Width="90" Height="90" HorizontalContentAlignment="Center" Vert...
nurmemet
985 0
nurmemet
|
C#
WPF开发-Label自定义背景-Decorator
首先在App.xaml文件当中添加样式和模板
nurmemet
1961 0
nurmemet
|
C#
wpf 开发 -TextBox背景自定义-Decorator
首先在app.xaml文件的下面添加以下样式
nurmemet
1636 0
杰克.陈
|
C# 前端开发
【C#】wpf自定义calendar日期选择控件的样式
原文:【C#】wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图，看下样式 原理 1. 总览： Calendar本质上是一个6x7的列表，这个列表可以用ItemsControl来实现。
杰克.陈
1090 0
杰克.陈
|
C# 前端开发
WPF中自定义MarkupExtension
原文:WPF中自定义MarkupExtension 　　在介绍这一篇文章之前，我们首先来回顾一下WPF中的一些基础的概念，首先当然是XAML了，XAML全称是Extensible Application Markup Language (可扩展应用程序标记语言)，是专门用于WPF技术中的UI设计语言...
杰克.陈
1016 0
追逐时光者
|
1月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
追逐时光者
67 0
老码识途
|
5月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道，在绘制流程图时，当选择或鼠标移动到控件时，都会在控件的四周出现锚点，以便于修改大小，移动位置，或连接线等，那此功能是如何实现的呢？在WPF开发中，想要在控件四周实现锚点，可以通过装饰器来实现，今天通过一个简单的小例子，简述如何在WPF开发中，应用装饰器，仅供学习分享使用，如有不足之处，还请指正。
老码识途
66 1
Rick_1/2
|
9月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素，用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状，可以绘制任意复杂度的多边形。
Rick_1/2
484 0