添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

效果如下: 在这里插入图片描述
这次我们将利用RadioButton自定义模板实现图文按钮的效果,其中图标采用阿里巴巴图标库,从网上下载阿里巴巴图标库的ttf文件,并导入到项目中备用。
在这里插入图片描述
然后我们编写前端代码

<UniformGrid Columns="4" Height="40" Width="400">
     <RadioButton Style="{StaticResource defaultRadioStyle}">
         <StackPanel Orientation="Horizontal">
             <TextBlock Text="&#xe614;" FontSize="18" FontFamily="Assets/Fonts/#iconfont" VerticalAlignment="Center"/>
             <TextBlock Text="首页" Margin="10 0 0 0" VerticalAlignment="Center"/>
         </StackPanel>
     </RadioButton>
     <RadioButton Style="{StaticResource defaultRadioStyle}">
         <StackPanel Orientation="Horizontal">
             <TextBlock Text="&#xe615;" FontSize="18" FontFamily="Assets/Fonts/#iconfont" VerticalAlignment="Center"/>
             <TextBlock Text="邮件" Margin="10 0 0 0" VerticalAlignment="Center"/>
         </StackPanel>
     </RadioButton>
     <RadioButton Style="{StaticResource defaultRadioStyle}">
         <StackPanel Orientation="Horizontal">
             <TextBlock Text="&#xe61b;" FontSize="18" FontFamily="Assets/Fonts/#iconfont" VerticalAlignment="Center"/>
             <TextBlock Text="图片" Margin="10 0 0 0" VerticalAlignment="Center"/>
         </StackPanel>
     </RadioButton>
     <RadioButton Style="{StaticResource defaultRadioStyle}">
         <StackPanel Orientation="Horizontal">
             <TextBlock Text="&#xe620;" FontSize="18" FontFamily="Assets/Fonts/#iconfont" VerticalAlignment="Center"/>
             <TextBlock Text="短信" Margin="10 0 0 0" VerticalAlignment="Center"/>
         </StackPanel>
     </RadioButton>
 </UniformGrid>

这里我们写了4个RadioButton,并编写一个静态样式:defaultRadioStyle

<Style x:Key="defaultRadioStyle" TargetType="RadioButton">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Foreground" Value="#88949A"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid Background="{TemplateBinding Background}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding Foreground}" BorderThickness="0 0 0 0 "/>
                    <ContentPresenter Focusable="False" 
                                      RecognizesAccessKey="True"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Foreground" Value="#8CEDCB"/>
                        <Setter Property="BorderThickness" Value="0 0 0 1" TargetName="border"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

需要注意的是,图标被看成是一个字符串,所以用TextBlock 的text属性,注意图标是以转义字符串的形式存在的。这样一个简单又漂亮的导航栏就做好了!
在这里插入图片描述

这次我们将利用RadioButton自定义模板实现图文按钮的效果,其中图标采用阿里巴巴图标库,从网上下载阿里巴巴图标库的ttf文件,并导入到项目中备用。然后我们编写前端代码&lt;UniformGrid Columns="4" Height="40" Width="400"&gt; &lt;RadioButton Style="{StaticResource defaultRadioStyle}"&gt; &lt;StackPanel Orientation="Horiz.
  WPF 内建了两种菜单——Menu 和ContextMenu(上下文菜单)。   1. Menu   Menu 的项可以是任何东西,但是你应该使用MenuItem 以及Separator 对象。 <Menu x:Name="menu" Height="23.333" VerticalAlignment="Top"> <MenuI...
object obj = new object(); int i = 0; private void Button_Click(object sender, RoutedEventArgs e) this.IsEnabled = false; var t = (DateTime.Now - lastClick).TotalMilliseconds; lastClick = Dat
RadioButton 控件允许您为用户提供可能选项的列表,同时只选择其一个选项。使用 ComboBox 控件可以使用更少的空间实现相同的效果,但是一组单选按钮往往可以让用户更好地了解他们拥有的选项。 <Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  WPF/Silverlight可以使用模板,修改应用该模板的控件的结构。可以修改控件模板,以重排、添加或删除控件的元素(或部件)。下面以一个具体的Demo来演示如何利用Expression Blend来编辑形状的模板。  创建Silverlight项目,命名为RadioButtonTemplate,向Grid添加一个RadioButton,取名为rbRed,如下图 右击rbR...
WPF ,可以使用后台代码实现将 Border 的控件水平垂直居。具体实现方式是通过计算控件的位置,然后设置 Margin 属性的值来实现。 假设要将一个名为 `content` 的控件居放置在一个 Border ,可以在后台代码添加如下代码: ```csharp double left = (border.ActualWidth - content.ActualWidth) / 2; double top = (border.ActualHeight - content.ActualHeight) / 2; content.Margin = new Thickness(left, top, 0, 0); 其,`border` 是包含控件的 Border,`content` 是要居的控件。代码先计算出控件在 Border 的左上角位置,然后将其设置为 Margin 属性的值即可。 需要注意的是,这段代码应该在 Border 和控件都加载完成之后执行,可以在 Border 的 `Loaded` 事件或者控件的 `Loaded` 事件添加这段代码。此外,如果 Border 或者控件的大小发生了变化,也需要重新计算位置并更新 Margin 属性的值。可以在 Border 的 `SizeChanged` 事件或者控件的 `SizeChanged` 事件处理这种情况。