UWP 自定义RadioButton实现Tab底部导航
先看效果：
参照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 }
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>
用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>
转载请标明出处：http://www.cnblogs.com/xiaocaidev/p/6984375.html，本文出自：【xiaocaidev的博客】
