【24】C# 自定义控件样式

作者: 业余玩家 | 来源:发表于2018-04-25 11:31 被阅读112次

目前接触到的C#应用程序，基本上采用了WPF进行界面设计，WPF是啥？是微软推出的基于Windows 的用户界面框架，利用它能够将界面设计和逻辑代码完全分离，而且能够实现很炫的画面效果，当然前提是你对它的使用较为熟悉，笔者目前也是在学习关于界面样式这方面的内容。

标签内样式

首先，我们新建一个WPF应用程序，建成之后我们可以看到主窗口的设计界面，然后我们根据自己想要的界面，进行制作，这里就使用button进行测试了。添加button按钮，点击鼠标右键，选择属性，或者按F4呼出属性界面设置窗口。对属性熟悉的可以直接修改xaml文件即可。我们设置了按钮的大小，以及颜色，这应该难不倒你，接着继续换一种方式。

<Window x:Class="teststyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85" Background="#FFE99A9A" />
    </Grid>
</Window>

2018-04-24_233932.png

2018-04-24_234005.png

使用Style

利用Style对元素进行样式设置，它就类似css可以设置html标签的样式。假如你想把按钮设置成相同的样式，你使用Style就能轻松的实现，当然，如果你想其中一个不一样也是可以的，下面用代码介绍它的使用。
这里放置了3个按钮，并用Style设置了他们的背景色，边框，透明度三个属性。
TargetType="Button" 这样样式就会作用于所有的button了。

<Window x:Class="teststyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="red"></Setter>
            <Setter Property="BorderBrush" Value="black"></Setter>
            <Setter Property="Opacity" Value="0.5"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85"  />
        <Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="211,27,0,0" Name="button2" VerticalAlignment="Top" Width="85" />
        <Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="384,27,0,0" Name="button3" VerticalAlignment="Top" Width="85" />
    </Grid>
</Window>

2018-04-25_001559.png

如何让它作用于其中一个呢？需要在样式上提供x:key，然后，将样式应用到标签上Style="{StaticResource 你的key值}" ，这样你就能单独设置其样式了，是不是跟css通过id和class进行设置一样。

<Window x:Class="teststyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="red"></Setter>
            <Setter Property="BorderBrush" Value="black"></Setter>
            <Setter Property="Opacity" Value="0.5"></Setter>
        </Style>
        
        <Style x:Key="btnone" TargetType="Button">
            <Setter Property="Background" Value="yellow"></Setter>
            <Setter Property="Content" Value="btnone"></Setter>
            <Setter Property="Opacity" Value="1"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource btnone}" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85"  />
        <Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="211,27,0,0" Name="button2" VerticalAlignment="Top" Width="85" />
        <Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="384,27,0,0" Name="button3" VerticalAlignment="Top" Width="85" />
    </Grid>
</Window>

2018-04-25_001803.png

使用模板

关于模板，我们比较常用的就是控件模板（ControlTemplate）和数据模板（DataTemplate）了。通过模板你可以改变控件的结构和外观。单独使用ControlTemplate必须制定key值，你可以使用style加模板的方式，就不是必要了。

<Window x:Class="teststyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="btnone" TargetType="Button">
            <Border Background="red" BorderThickness="1">
                <Grid Margin="1" Background="AliceBlue">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4" />
                </Grid>
            </Border>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button Template="{StaticResource btnone}" Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85"  />
    </Grid>
</Window>

2018-04-25_004952.png

根据控件状态改变样式

这里介绍两种方式，一种是通过触发器（Triggers）来进行改变，另一种使用visualstate对象改变控件的样式，.net4.0开始引入VisualStateManager，主要为了控制控件的状态转换，和其间涉及的外观行为。，所要要使用这个必须将项目换成.net4.0框架。

//鼠标移动上去，改变字体大小
<Window x:Class="teststyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.Setters>
                        <Setter Property="FontSize" Value="22" />
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85"  />
    </Grid>
</Window>

2018-04-25_012121.png

//鼠标移动上去改变边框颜色
<Window x:Class="teststyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="btnone" TargetType="Button">
            <Border>
                <Border.Background>
                    <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
                </Border.Background>
                <Grid Background="{TemplateBinding Background}" Margin="4">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="2" />
                </Grid>
                <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Red" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
            </Border>
        </ControlTemplate>
    </Window.Resources>

    <Grid>
        <Button Template="{StaticResource btnone}" Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85"  />
    </Grid>
</Window>

2018-04-25_110647.png

参考资料

样式设置和模板化

网友评论

程序员

本文标题：【24】C# 自定义控件样式

本文链接：https://www.haomeiwen.com/subject/llqllftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！