UWP自定義RadioButton實現Tab底部導航

先看效果：參照Android的實現方式用RadioButton來實現，但是Uwp的RadioButton並沒有安卓的Selector選擇器下麵是一個比較簡單的實現，如果有同學有更好的實現，歡迎留言，讓我們共同進步。 1、首先自定義一個RadioImageButton控制項，並定義幾個依賴屬性，代碼 ...

先看效果：

參照Android的實現方式用RadioButton來實現，但是Uwp的RadioButton並沒有安卓的Selector選擇器

下麵是一個比較簡單的實現，如果有同學有更好的實現，歡迎留言，讓我們共同進步。

1、首先自定義一個RadioImageButton控制項，並定義幾個依賴屬性，代碼如下

 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控制項，代碼如下

 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、下麵就開始使用了，直接上代碼

 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