首页 > 其他分享 >WPF 选项卡 控件 美化

WPF 选项卡 控件 美化

时间:2023-12-04 22:12:24浏览次数:27  
标签:控件 www 选项卡 333.337 WPF 美化

WPF 选项卡 控件 美化

效果:

 样式

<LinearGradientBrush x:Key="TabItem.Selected.BordernCjh" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="#FFE8A6" Offset="0.07" />
    <GradientStop Color="#FFFAEA" Offset="0.1" />
    <GradientStop Color="#FFFAEA" Offset="0.4" />
    <GradientStop Color="#FFE8A6" Offset="0.5" />
</LinearGradientBrush>
<SolidColorBrush x:Key="PrimaryBlueColor" Color="#348EF6"/>
<SolidColorBrush x:Key="SecundaryBlueColor" Color="#EFF2EF"/>
<SolidColorBrush x:Key="PrimaryTextColor" Color="#FFFFFF"/>
<SolidColorBrush x:Key="SecundaryTextColor" Color="#BBC1D1"/>

<!--start Style-->

<!--start tabItem Style
    Foreground="{DynamicResource SecundaryTextColor}"
-->
<Style x:Key="TabItemStyle" TargetType="TabItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{DynamicResource SecundaryTextColor}"/>
    <!--<Setter Property="FontWeight" Value="Bold"/>-->
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Margin" Value="0 0 5 0"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Padding" Value="10 10"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Grid SnapsToDevicePixels="True">
                    <Border CornerRadius="5"
                            Background="{TemplateBinding Background}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Margin="{TemplateBinding Margin}"
                            />
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      SnapsToDevicePixels="True"
                                      RecognizesAccessKey="True"
                                      Margin="{TemplateBinding Padding}"
                                      ContentSource="Header"
                                      Focusable="True"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{DynamicResource SecundaryBlueColor}"/>
                        <Setter Property="Foreground" Value="{DynamicResource PrimaryBlueColor}"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="{DynamicResource PrimaryBlueColor}"/>
                        <Setter Property="Foreground" Value="{DynamicResource SecundaryBlueColor}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!--end tabItem Style-->

<!--start tabControl Style-->
<Style x:Key="TabControlStyle" TargetType="TabControl">
    <Setter Property="Background" Value="{DynamicResource SecundaryBlueColor}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabControl">
                <Grid SnapsToDevicePixels="True">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <!--TabPanel 可以设置 HorizontalAlignment 属性改变选项卡的对齐方式-->
                    <TabPanel Grid.Row="0"
                              Background="Transparent"
                              IsItemsHost="True"
                              />
                    
                    <Border Grid.Row="1"
                            CornerRadius="5"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"                                    
                            >
                        <ContentPresenter ContentSource="SelectedContent"
                                          SnapsToDevicePixels="True"
                                          Margin="{TemplateBinding Padding}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!--end tabControl Style-->
    
<!--end Style-->

 

<Grid Background="{DynamicResource PrimaryBlueColor}">
    <Border CornerRadius="10"
            Padding="30"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Background="{DynamicResource PrimaryTextColor}">
        <TabControl Width="600" Height="450" Style="{DynamicResource TabControlStyle}">
            <TabItem Header="Home" Style="{DynamicResource TabItemStyle}" >
                <Grid>
                    <TextBlock Text="Home"
                               Foreground="{DynamicResource SecundaryTextColor}"
                               FontSize="20"
                               FontWeight="Bold"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               />
                </Grid>
            </TabItem>

            <TabItem Header="Home1" Style="{DynamicResource TabItemStyle}">
                <Grid>
                    <TextBlock Text="Home1"
       Foreground="{DynamicResource SecundaryTextColor}"
       FontSize="20"
       FontWeight="Bold"
       VerticalAlignment="Center"
       HorizontalAlignment="Center"
       />
                </Grid>
            </TabItem>

            <TabItem Header="Home2" Style="{DynamicResource TabItemStyle}">
                <Grid>
                    <TextBlock Text="Home2"
       Foreground="{DynamicResource SecundaryTextColor}"
       FontSize="20"
       FontWeight="Bold"
       VerticalAlignment="Center"
       HorizontalAlignment="Center"
       />
                </Grid>
            </TabItem>
        </TabControl>
    </Border>
</Grid>

看视频学的:https://www.bilibili.com/video/BV1d44y1T7Bc/?spm_id_from=333.337.search-card.all.click&vd_source=07b3362db38d9aab6f79acf5dcc1901c

标签:控件,www,选项卡,333.337,WPF,美化
From: https://www.cnblogs.com/stevenchen2016/p/17876133.html

相关文章

  • wpf学习 Prism 使用入门
    一、手动添加安装包Prism.DryIocapp.xaml.cs修改继承基类为:PrismApplication实现其中的抽象成员:CreateShell用于指定启动的窗口类1publicpartialclassApp:PrismApplication2{3protectedoverrideWindowCreateShell()4{5......
  • WPF应用开发之控件动态内容展示
    在我们开发一些复杂信息的时候,由于需要动态展示一些相关信息,因此我们需要考虑一些控件内容的动态展示,可以通过动态构建控件的方式进行显示,如动态选项卡展示不同的信息,或者动态展示一个自定义控件的内容等等,目的就是能够减少一些硬编码的处理方式,以及能够灵活的展示数据。本篇随笔通......
  • WPF应用开发之附件管理
    在我们之前的开发框架中,往往都是为了方便,对附件的管理都会进行一些简单的封装,目的是为了方便快速的使用,并达到统一界面的效果,本篇随笔介绍我们基于SqlSugar开发框架的WPF应用端,对于附件展示和控件的一些封装处理界面效果,供大家参考斧正。1、回顾附件管理,Winform端以及VueElement的......
  • Wpf Prism 导航(参数传递,路由守卫,路由记录)
    十年河东,十年河西,莫欺少年穷学无止境,精益求精1、新建项目wpfApp5,添加Nuget引用,并初始化App.xaml及cs类 app.xaml如下:<Prism:PrismApplicationx:Class="WpfApp5.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="......
  • Wpf 第三方Mvvm包(mvvmLight/Microsoft.Toolkit.Mvvm/CommunityToolkit.Mvvm)
    十年河东,十年河西,莫欺少年穷学无止境,精益求精 mvvmLight和 Microsoft.Toolkit.Mvvm已被Nuget弃用且不再更新,在此不作说明CommunityToolkit.Mvvm是NetCore版本引用包,详情参考:WPFMVVM框架:CommunityToolkit.Mvvm包使用介绍1、wpf项目中使用 CommunityToolkit.Mvvm(NetCore3.1......
  • WPF 控件驱动控件 及 数据驱动控件(双向绑定)
    wpf双向绑定十年河东,十年河西,莫欺少年穷学无止境,精益求精最近在知乎,看了很多提问,涉及到就业,裁员,经济等,不看不知道,越看越头疼,知乎上很多人提问毕业生就业如何难,2023年裁员如何严重,35岁的中年危机,程序员被裁员后找不到工作该,经济如何差等话题哎,这让我这个35......
  • 极语言3-15 Win32编程常用函数-公用图形库,图面说明类、颜色控件类、伽玛渐变类——成
    Win32编程常用函数-公用图形库中文名称英文名称示例作用图驱创建DirectDrawCreate图驱创建(标识,@接口,0)创建DirectDraw对象的实例。标识用设备GUID为硬件加速,用0为仿真;1模拟硬件支持;2纯仿真无硬件;成功返回0;图驱个例DirectDrawCreateClipper图驱个例(0,@接口,0)创建不与Direc......
  • 搭建Wpf框架(18) ——DataGrid实现右冻结
    19.搭建Wpf框架(18)——DataGrid实现右冻结先上效果图: 其中,Field3和Field4为右冻结列。将一下大致思路,1.在DataGrid右边再放一个DataGrid,用来显示右冻结的列,把冻结的列从左边的DataGrid移除。2.然后左边的DataGrid右侧的滚动条隐藏,横向滚动条显示,右边的DataDataGrid右侧......
  • 如何将 sap.ui.Table 控件的背景设置成透明
    笔者曾经写过一篇文章,介绍了如何在SAPUI5应用里设置背景图片:下图1是背景图片,图2是把这个背景图片加到SAPUI5应用之后的效果。https://blog.csdn.net/i042416/article/details/134643986后来有朋友追问:如果我的SAPUI5应用里使用的表格控件,没有用响应式表格sap.m.Tab......
  • 直播平台源代码,实现一个简单的带tabs选项卡切换的首页导航功能
    直播平台源代码,实现一个简单的带tabs选项卡切换的首页导航功能 package.json: { "name":"angular-router", "version":"0.0.0", "scripts":{  "ng":"ng",  "start":"ngserve",  "bui......