zoukankan      html  css  js  c++  java
  • WPF TabControl美化


    <
    Window.Resources> <!-- TabItem的样式 --> <Style TargetType="{x:Type TabItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid> <!-- 主Border --> <Border Name="bd" Margin="5,10,5,0" Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="3" CornerRadius="7"> <ContentPresenter Margin="20,10" VerticalAlignment="Center" ContentSource="Header" /> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="bd" Property="BorderThickness" Value="2" /> <Setter TargetName="bd" Property="Margin" Value="0" /> </Trigger> <Trigger Property="IsMouseOver" Value="True" /> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Foreground" Value="Black" /> <Setter Property="FontSize" Value="18" /> </Style> <!-- TabControl的样式 --> <Style TargetType="{x:Type TabControl}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabControl}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Border Padding="10"> <TabPanel IsItemsHost="True" /> </Border> <Border Grid.Row="1" Padding="10" BorderBrush="Gray" BorderThickness="2"> <ContentPresenter Name="PART_SelectedContentHost" ContentSource="SelectedContent" /> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <TabControl> <TabItem Background="#FFFFFF72" Header="aaa">test</TabItem> <TabItem Background="#FFAEFF7A" Header="bbb"> <DockPanel> <Button DockPanel.Dock="Bottom">hehe</Button> <TextBox /> </DockPanel> </TabItem> <TabItem Background="#FFA6D5FF" Header="ccc">test</TabItem> </TabControl>

      因为项目的需求,需要做一个类似于商城的选购的页面 ,根据不同的分类来选择不同的商品。

      因为刚开始学习WPF,暂时不知道如何去修改Tab Control的模板,于是按照其他博主的教程,使用Blend来查看控件的构成,于是自己摸索了一下,在网上也看到了一些不错的美化。

      后面我会根据自己的需求来更改,后续的效果图会放在下一篇博客。

         看到一个非常不错的TabControl的美化,转载分享过来了,需要不同的需求的,可以根据自己的需求来更改模板。

      代码放在上面,效果图如下:

    效果:

  • 相关阅读:
    web前端的发展态势
    AngularJs 简单入门
    css代码优化篇
    git提交报错:Please make sure you have the correct access rights and the repository exists.
    Activiti工作流框架学习
    遍历map集合的4种方法
    js设置日期、月份增加减少
    Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
    webservice_rest接口_学习笔记
    相互匹配两个list集合+动态匹配${}参数
  • 原文地址:https://www.cnblogs.com/ganbei/p/14344587.html
Copyright © 2011-2022 走看看