控件 UI: 字体的自动继承的特性, Style, ControlTemplate

字体的自动继承的特性

  • Style 样式
  • ControlTemplate 控件模板

示例
1、演示字体的自动继承的特性
Controls/UI/FontInherit.xaml

<Page
    x:Class="Windows10.Controls.UI.FontInherit"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    FontSize="100">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                本例演示字体的自动继承的特性
                Font 相关的设置来自 Windows.UI.Xaml.Controls.Control
            -->

            <!--
                继承了 Page 的关于 Font 的设置
            -->
            <TextBlock Text="FontSize = 100" />

            <UserControl FontSize="50">
                <!--
                    继承了 UserControl 的关于 Font 的设置
                -->
                <TextBlock Text="FontSize = 50" />
            </UserControl>

        </StackPanel>
    </Grid>
</Page>

2、演示“Style”相关知识点
Controls/UI/Style.xaml

<Page
    x:Class="Windows10.Controls.UI.Style"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Name="grid" Background="Transparent">

        <!--
            注：在 Grid.Resources 指定的资源（支持 ResourceDictionary 方式），其作用域仅在 Grid 之内，全局资源需要在 App.xaml 中配置
        -->
        <Grid.Resources>

            <!--
                Style - 样式
                    x:Key - 标识（不指定此值，则样式会应用于所有 TargetType 所指定的类型）
                    TargetType - 目标对象类型
                    BasedOn - 指定当前样式的父样式（此样式会继承指定的父样式）
                    Setter - 属性设置器
                        Property - 需要设置的属性名称
                        Value - 需要设置的属性值
            -->

            <!--
                自定义一个基础样式
            -->
            <Style x:Key="TextBoxStyleBase" TargetType="TextBox">
                <Setter Property="Foreground" Value="Red"/>
            </Style>

            <!--
                这是自定义了全局样式，但是其他的自定义样式并不会自动继承这个自定义全局样式
                所以，此处用 BasedOn 继承基础样式，然后其他自定义样式也继承基础样式就好（这就相当于继承了这个自定义全局样式）
            -->
            <Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyleBase}">

            </Style>

            <!--
                不会自动继承上面的自定义全局样式
            -->
            <Style x:Key="TextBoxStyleBig1" TargetType="TextBox">
                <Setter Property="FontSize" Value="24"/>
                <Setter Property="Height" Value="60"/>
            </Style>

            <!--
                继承了基础样式（相当于继承了上面的自定义全局样式）
            -->
            <Style x:Key="TextBoxStyleBig2" TargetType="TextBox" BasedOn="{StaticResource TextBoxStyleBase}">
                <Setter Property="FontSize" Value="24"/>
                <Setter Property="Height" Value="60"/>
            </Style>

        </Grid.Resources>

        <StackPanel Margin="10 0 10 10">

            <!--默认使用自定义全局样式-->
            <TextBox Name="textBox1" Text="我是 TextBox" Margin="5" />

            <!--指定样式资源-->
            <TextBox Name="textBox2" Text="我是 TextBox" Margin="5" Style="{StaticResource TextBoxStyleBig1}" />

            <!--动态改变 FrameworkElement 的样式-->
            <Button Name="btnChangeStyle" Margin="5" Content="改变样式" Click="btnChangeStyle_Click" />

            <!--内联样式-->
            <TextBox Name="textBox3" Text="我是 TextBox" Margin="5">
                <ToolTipService.ToolTip>
                    <ToolTip Name="toolTip" Content="ToolTipService.ToolTip" Placement="Bottom">
                        <ToolTip.Style>
                            <Style TargetType="ToolTip">
                                <Setter Property="Foreground" Value="Blue" />
                            </Style>
                        </ToolTip.Style>
                    </ToolTip>
                </ToolTipService.ToolTip>
                <TextBox.Style>
                    <Style TargetType="TextBox">
                        <Setter Property="Background" Value="Green"/>
                    </Style>
                </TextBox.Style>
            </TextBox>

            <!--在 c# 中定义样式-->
            <TextBox Name="textBox4" Text="我是 TextBox" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/UI/Style.xaml.cs

/*
 * 演示“Style”相关知识点
 *
 * 注：
 * 1、Style 属性来自 Windows.UI.Xaml.FrameworkElement
 */

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.UI
{
    public sealed partial class Style : Page
    {
        public Style()
        {
            this.InitializeComponent();

            this.Loaded += Style_Loaded;
        }

        // 在 c# 中定义样式
        private void Style_Loaded(object sender, RoutedEventArgs e)
        {
            Windows.UI.Xaml.Style style = new Windows.UI.Xaml.Style();
            style.TargetType = typeof(TextBox);

            Setter setter1 = new Setter();
            setter1.Property = TextBox.BackgroundProperty;
            setter1.Value = Colors.Blue;

            style.Setters.Add(setter1);

            textBox4.Style = style;
        }

        // 改变样式
        private void btnChangeStyle_Click(object sender, RoutedEventArgs e)
        {
            // 获取 Application 中的资源
            // (Windows.UI.Xaml.Style)Application.Current.Resources["myStyle"];

            // 获取关联 xaml 内的资源
            if (textBox2.Style == (Windows.UI.Xaml.Style)grid.Resources["TextBoxStyleBig1"])
            {
                // 指定样式
                textBox2.Style = (Windows.UI.Xaml.Style)grid.Resources["TextBoxStyleBig2"];
            }
            else
            {
                textBox2.Style = (Windows.UI.Xaml.Style)grid.Resources["TextBoxStyleBig1"];
            }
        }
    }
}

3、演示“ControlTemplate”相关知识点
Controls/UI/ControlTemplate.xaml

<Page
    x:Class="Windows10.Controls.UI.ControlTemplate"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Name="grid" Background="Transparent">

        <!--
            注：在 Grid.Resources 指定的资源（支持 ResourceDictionary 方式），其作用域仅在 Grid 之内，全局资源需要在 App.xaml 中配置
        -->
        <Grid.Resources>

            <!--
                ControlTemplate - 控件模板
                    x:Key - 标识
                    TargetType - 目标对象类型
                ContentPresenter - 相当于一个容器，用于显示 ContentControl 的 Content 属性指定的内容
                TemplateBinding - 模板绑定
            -->

            <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
                <Border BorderBrush="Red" BorderThickness="5">
                    <!--
                        TemplateBinding 是一个简单版的 Binding，用于在模板中绑定控件的某个属性，其是 OneWay 的
                        那如果想在控件模板中使用双向绑定该怎么做呢，参见“绑定”部分
                    -->
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Right" Foreground="Red" />
                    </Grid>
                </Border>
            </ControlTemplate>

            <ControlTemplate x:Key="ButtonControlTemplate2" TargetType="Button">
                <Border BorderBrush="Purple" BorderThickness="5">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Right" Foreground="Blue" />
                    </Grid>
                </Border>
            </ControlTemplate>

            <!--在 Style 中设置 ControlTemplate-->
            <Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border BorderBrush="Red" BorderThickness="5">
                                <Grid Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Right" Foreground="Green" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <StackPanel Margin="10 0 10 10">

            <!--指定控件模板-->
            <Button Name="button1" Content="我是 Button" Width="300" Margin="5" Background="Yellow" Template="{StaticResource ButtonControlTemplate1}" />

            <!--动态改变 Control 的控件模板-->
            <Button Name="btnChangeControlTemplate" Content="改变控件模板" Margin="5" Click="btnChangeControlTemplate_Click" />

            <!--在 Style 中设置 ControlTemplate-->
            <Button Content="我是 Button" Width="300" Margin="5" Background="Yellow" Style="{StaticResource ButtonStyle}" />

            <!--内联控件模板-->
            <Button Content="我是 Button" Width="300" Margin="5">
                <Button.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Red" BorderThickness="5">
                            <Grid Background="Black">
                                <ContentPresenter HorizontalAlignment="Right" Foreground="Orange" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

        </StackPanel>
    </Grid>
</Page>

Controls/UI/ControlTemplate.xaml.cs

/*
 * 演示“ControlTemplate”相关知识点
 *
 * 注：
 * 1、控件模板是 xaml 语言使用的一种方案，其无法在 c# 中定义
 * 2、Template 属性来自 Windows.UI.Xaml.Controls.Control
 */

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace Windows10.Controls.UI
{
    public sealed partial class ControlTemplate : Page
    {
        public ControlTemplate()
        {
            this.InitializeComponent();
        }

        private void btnChangeControlTemplate_Click(object sender, RoutedEventArgs e)
        {
            // 获取 Application 中的资源
            // (Windows.UI.Xaml.Style)Application.Current.Resources["MyControlTemplate"];

            // 获取关联 xaml 内的资源
            if (button1.Template == (Windows.UI.Xaml.Controls.ControlTemplate)grid.Resources["ButtonControlTemplate1"])
            {
                // 指定控件模板
                button1.Template = (Windows.UI.Xaml.Controls.ControlTemplate)grid.Resources["ButtonControlTemplate2"];
            }
            else
            {
                button1.Template = (Windows.UI.Xaml.Controls.ControlTemplate)grid.Resources["ButtonControlTemplate1"];
            }
        }
    }
}
时间： 2024-08-05 01:10:18

控件 UI: 字体的自动继承的特性, Style, ControlTemplate的相关文章

根据ui控件的字体计算占用的长度

//1.根据icon计算name的长度 CGFloat nameX = CGRectGetMaxX(_icon.frame) + kBorder; CGFloat nameY = iconY; //计算用户昵称的长度 CGSize nameSize = [_weiBo.name sizeWithFont:_name.font]; _name.frame = CGRectMake(nameX, nameY, nameSize.width, nameSize.height); //2.设置vip的f

背水一战 Windows 10 (8) - 控件 UI: StateTrigger

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件 UI VisualState 之 StateTrigger 示例1.自定义 StateTriggerControls/UI/VisualState/MyDeviceFamilyStateTrigger.cs /* * 用于演示自定义 StateTrigger * * * StateTriggerBase - 自定义 StateTrigger 需要继承此基类 * SetActive(Boolean IsActive)

如何修改全部DevExpress控件的字体

引用:https://www.devexpress.com/Support/Center/Question/Details/A2761 You can change the default font used by DevExpress WindowsForms controls with the following static properties: DevExpress.XtraEditors.WindowsFormsSettings.DefaultFont - Specifies the

C# 控件随窗口大小变化自动缩放

1 要想控件随窗口大小变化自动缩放,就要重写Resize函数就可以实现了. protected override void OnResizeEnd(EventArgs e) { base.OnResizeEnd(e); Size endSize = this.Size; float percentWidth = (float)endSize.Width / _beforeDialogSize.Width; float percentHeight = (float)endSize.Height /

[原]C#按比例缩放窗体控件及字体

按照比例缩放窗体控件及字体,如需等比例缩放,只需将x,y的比例设置成相同即可. 为了减小误差,建议使用原始尺寸来计算比例. 1 private float X, Y; 2 3 private bool b = false; 4 5 public MainForm() 6 { 7 InitializeComponent(); 8 9 X = this.Width; 10 Y = this.Height; 11 12 SetTag(this); 13 14 b = true; 15 } 16 17

困扰已久——DataGridView控件填充数据时自动添加列

    机房重构慢慢的走到了尽头,最近正在进行最后的润色中,今天解决了一个困扰许久但是非常简单的问题.我们在查询上机和充值记录时,用到了DataGridView控件.我们在VB版的机房收费系统中也用过类似的,不过显然没有.NET中如此灵活呀!     在填充数据时,我们分明已经写好了控件的列名,可是在填充数据时,会向DataGridView后面自动增加列,然后填充增加的列的数据,效果如下:    解决方法:        其中,DataPropertyName是绑定的数据源或者数据库中对应的字段

【MFC系列】MFC快速设置控件文本字体、大小、颜色、背景

以静态文本为例,分享一下怎么修改文本字体.大小.颜色.背景等参数.其他文本.控件等可参照修改. 1.修改字体.大小 这个很简单,首先在Dlg类中声明一个CFont类型的成员变量: 然后在类的初始化函数OnInitDialog()中添加以下两行代码: 1 //设置静态文本字体大小 2 m_editFont.CreatePointFont(180, _T("宋体")); 3 m_Static.SetFont(&m_editFont); 2.改变编辑框文本颜色.背景颜色 右键点击该对

Android控件之MultiAutoCompleteTextView（自动匹配输入的内容）

一.功能 可支持选择多个值(在多次输入的情况下),分别用分隔符分开,并且在每个值选中的时候再次输入值时会自动去匹配,可用在发送短信,发邮件时选择联系人这种类型中 二.独特属性 android:completionThreshold = "2"    ——设置输入多少字符时自动匹配 三.设置分隔符 mtxt.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());——设置以逗号作为分隔符 四.代码演示 <Linear

Android控件之AutoCompleteTextView（自动匹配输入的内容）

一.功能 动态匹配输入的内容,如百度搜索引擎当输入文本时,可以根据内容显示匹配的热门信息 二.独特属性 android:completionThreshold = "2"    ——设置输入多少字符时自动匹配 三.代码演示 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" an