欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

UWP 自定义RadioButton实现Tab底部导航

程序员文章站 2022-06-23 09:09:51
先看效果: 参照Android的实现方式用RadioButton来实现,但是Uwp的RadioButton并没有安卓的Selector选择器 下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步。 1、首先自定义一个RadioImageButton控件,并定义几个依赖属性,代码 ......

先看效果:

UWP 自定义RadioButton实现Tab底部导航

参照Android的实现方式用RadioButton来实现,但是Uwp的RadioButton并没有安卓的Selector选择器

下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步。

1、首先自定义一个RadioImageButton控件,并定义几个依赖属性,代码如下

UWP 自定义RadioButton实现Tab底部导航
 1 using System;
 2 using System.Collections.Generic;
 3 using System.Text;
 4 using Windows.UI;
 5 using Windows.UI.Xaml;
 6 using Windows.UI.Xaml.Controls;
 7 using Windows.UI.Xaml.Media;
 8 
 9 namespace Demo.UWP.Controls
10 {
11     public class RadioImageButton : RadioButton
12     {
13         //默认图片
14         public ImageSource Source
15         {
16             get { return (ImageSource)GetValue(SourceProperty); }
17             set { SetValue(SourceProperty, value); }
18         }
19 
20         // Using a DependencyProperty as the backing store for Source.  This enables animation, styling, binding, etc...
21         public static readonly DependencyProperty SourceProperty =
22             DependencyProperty.Register("Source", typeof(ImageSource), typeof(RadioImageButton), null);
23 
24         //选中图片
25         public ImageSource SourceChecked
26         {
27             get { return (ImageSource)GetValue(SourceCheckedProperty); }
28             set { SetValue(SourceCheckedProperty, value); }
29         }
30 
31         // Using a DependencyProperty as the backing store for SourceChecked.  This enables animation, styling, binding, etc...
32         public static readonly DependencyProperty SourceCheckedProperty =
33             DependencyProperty.Register("SourceChecked", typeof(ImageSource), typeof(RadioImageButton), null);
34 
35         //选中文字颜色
36         public SolidColorBrush ForegroundChecked
37         {
38             get { return (SolidColorBrush)GetValue(ForegroundCheckedProperty); }
39             set { SetValue(ForegroundCheckedProperty, value); }
40         }
41 
42         // Using a DependencyProperty as the backing store for ForegroundChecked.  This enables animation, styling, binding, etc...
43         public static readonly DependencyProperty ForegroundCheckedProperty =
44             DependencyProperty.Register("ForegroundChecked", typeof(SolidColorBrush), typeof(RadioImageButton), new PropertyMetadata(new SolidColorBrush(Colors.Black)));
45 
46         //图片宽度
47         public double ImageWidth
48         {
49             get { return (double)GetValue(ImageWidthProperty); }
50             set { SetValue(ImageWidthProperty, value); }
51         }
52 
53         // Using a DependencyProperty as the backing store for ImageWidth.  This enables animation, styling, binding, etc...
54         public static readonly DependencyProperty ImageWidthProperty =
55             DependencyProperty.Register("ImageWidth", typeof(double), typeof(RadioImageButton), new PropertyMetadata(50));
56 
57 
58 
59         public double ImageHeight
60         {
61             get { return (double)GetValue(ImageHeightProperty); }
62             set { SetValue(ImageHeightProperty, value); }
63         }
64 
65         // Using a DependencyProperty as the backing store for ImageHeight.  This enables animation, styling, binding, etc...
66         public static readonly DependencyProperty ImageHeightProperty =
67             DependencyProperty.Register("ImageHeight", typeof(double), typeof(RadioImageButton), new PropertyMetadata(50));
68 
69 
70 
71         public Thickness ImageMargin
72         {
73             get { return (Thickness)GetValue(ImageMarginProperty); }
74             set { SetValue(ImageMarginProperty, value); }
75         }
76 
77         // Using a DependencyProperty as the backing store for ImageMargin.  This enables animation, styling, binding, etc...
78         public static readonly DependencyProperty ImageMarginProperty =
79             DependencyProperty.Register("ImageMargin", typeof(Thickness), typeof(RadioImageButton), null);
80 
81 
82     }
83 }
View Code

 

2、使用Blend工具生成RadioButton的模板,并修改其中的Grid,删除无用代码,添加一个Image控件,代码如下

UWP 自定义RadioButton实现Tab底部导航
 1 <ResourceDictionary
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5     xmlns:local="using:Demo.UWP"
 6     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 7     xmlns:mycontrols="using:Demo.UWP.Controls"
 8     mc:Ignorable="d">
 9     <Style x:Key="RadioImageButtonStyle1" TargetType="mycontrols:RadioImageButton">
10         <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" />
11         <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" />
12         <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" />
13         <Setter Property="Padding" Value="0" />
14         <Setter Property="HorizontalAlignment" Value="Left" />
15         <Setter Property="VerticalAlignment" Value="Center" />
16         <Setter Property="HorizontalContentAlignment" Value="Center" />
17         <Setter Property="VerticalContentAlignment" Value="Top" />
18         <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
19         <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
20         <Setter Property="MinWidth" Value="0" />
21         <Setter Property="UseSystemFocusVisuals" Value="True" />
22         <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
23         <Setter Property="Template">
24             <Setter.Value>
25                 <ControlTemplate TargetType="mycontrols:RadioImageButton">
26                     <Grid
27                         x:Name="RootGrid"
28                         Background="{TemplateBinding Background}"
29                         BorderBrush="{TemplateBinding BorderBrush}"
30                         BorderThickness="{TemplateBinding BorderThickness}">
31                         <Grid.RowDefinitions>
32                             <RowDefinition Height="auto" />
33                             <RowDefinition Height="*" />
34                         </Grid.RowDefinitions>
35                         <Image
36                             x:Name="ImageFront"
37                             Width="{TemplateBinding ImageWidth}"
38                             Height="{TemplateBinding ImageHeight}"
39                             Margin="{TemplateBinding ImageMargin}"
40                             HorizontalAlignment="Center"
41                             VerticalAlignment="Center"
42                             Source="{TemplateBinding Source}"
43                             Stretch="Uniform" />
44                         <ContentPresenter
45                             x:Name="ContentPresenter"
46                             Grid.Row="1"
47                             Margin="{TemplateBinding Padding}"
48                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
49                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
50                             AutomationProperties.AccessibilityView="Raw"
51                             Content="{TemplateBinding Content}"
52                             ContentTemplate="{TemplateBinding ContentTemplate}"
53                             ContentTransitions="{TemplateBinding ContentTransitions}"
54                             Foreground="{TemplateBinding Foreground}"
55                             TextWrapping="Wrap" />
56                         <VisualStateManager.VisualStateGroups>
57                             <VisualStateGroup x:Name="CheckStates">
58                                 <VisualState x:Name="Checked">
59                                     <VisualState.Setters>
60                                         <!--<Setter Target="ImageBack.Visibility" Value="Visible"/>
61                                         <Setter Target="ImageFront.Visibility" Value="Collapsed"/>-->
62                                         <Setter Target="ImageFront.Source" Value="{Binding SourceChecked, RelativeSource={RelativeSource TemplatedParent}}" />
63                                         <Setter Target="ContentPresenter.Foreground" Value="{Binding ForegroundChecked, RelativeSource={RelativeSource TemplatedParent}}" />
64                                     </VisualState.Setters>
65                                     <!--<Storyboard>
66                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageBack" Storyboard.TargetProperty="Visibility">
67                                             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
68                                         </ObjectAnimationUsingKeyFrames>
69                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageFront" Storyboard.TargetProperty="Visibility">
70                                             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
71                                         </ObjectAnimationUsingKeyFrames>
72                                     </Storyboard>-->
73                                 </VisualState>
74                                 <VisualState x:Name="Unchecked" />
75                                 <VisualState x:Name="Indeterminate" />
76                             </VisualStateGroup>
77                         </VisualStateManager.VisualStateGroups>
78                     </Grid>
79                 </ControlTemplate>
80             </Setter.Value>
81         </Setter>
82     </Style>
83 </ResourceDictionary>
View Code

用VisualStateManager实现选中状态的实现,56-77行代码,这里Setter的Value并不能用TemplateBinding进行绑定,点击是会报一个Value的异常

 

3、下面就开始使用了,直接上代码

UWP 自定义RadioButton实现Tab底部导航
 1 <Grid>
 2                     <Grid.ColumnDefinitions>
 3                         <ColumnDefinition Width="auto" />
 4                         <ColumnDefinition Width="auto" />
 5                         <ColumnDefinition Width="auto" />
 6                         <ColumnDefinition Width="auto" />
 7                     </Grid.ColumnDefinitions>
 8                     <mycontrols:RadioImageButton
 9                         Grid.Row="0"
10                         Margin="10"
11                         Checked="RadioImageButton_Checked"
12                         Content="首页"
13                         FontSize="12"
14                         FontWeight="Normal"
15                         ForegroundChecked="Orange"
16                         ImageHeight="40"
17                         ImageMargin="5"
18                         ImageWidth="40"
19                         Source="ms-appx:///Assets/Main/main_index_home_normal.png"
20                         SourceChecked="ms-appx:///Assets/Main/main_index_home_pressed.png"
21                         Style="{StaticResource RadioImageButtonStyle1}" />
22                     <mycontrols:RadioImageButton
23                         Grid.Column="1"
24                         Margin="10"
25                         Content="品质优惠"
26                         FontSize="12"
27                         FontWeight="Normal"
28                         ForegroundChecked="Orange"
29                         ImageHeight="40"
30                         ImageMargin="5"
31                         ImageWidth="40"
32                         Source="ms-appx:///Assets/Main/main_index_quality_normal.png"
33                         SourceChecked="ms-appx:///Assets/Main/main_index_quality_pressed.png"
34                         Style="{StaticResource RadioImageButtonStyle1}" />
35                     <mycontrols:RadioImageButton
36                         Grid.Column="2"
37                         Margin="10"
38                         Content="发现"
39                         FontSize="12"
40                         FontWeight="Normal"
41                         ForegroundChecked="Orange"
42                         ImageHeight="40"
43                         ImageMargin="5"
44                         ImageWidth="40"
45                         Source="ms-appx:///Assets/Main/main_index_search_normal.png"
46                         SourceChecked="ms-appx:///Assets/Main/main_index_search_pressed.png"
47                         Style="{StaticResource RadioImageButtonStyle1}" />
48                     <mycontrols:RadioImageButton
49                         Grid.Column="3"
50                         Margin="10"
51                         Content="我的"
52                         FontSize="12"
53                         FontWeight="Normal"
54                         ForegroundChecked="Orange"
55                         ImageHeight="40"
56                         ImageMargin="5"
57                         ImageWidth="40"
58                         Source="ms-appx:///Assets/Main/main_index_my_normal.png"
59                         SourceChecked="ms-appx:///Assets/Main/main_index_my_pressed.png"
60                         Style="{StaticResource RadioImageButtonStyle1}" />
61                 </Grid>
View Code

转载请标明出处:,本文出自:【】