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

先看效果：

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

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

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

 using System;
 using System.Collections.Generic;
 using System.Text;
 using Windows.UI;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Media;

 namespace Demo.UWP.Controls
 {
     public class RadioImageButton : RadioButton
     {
         //默认图片
         public ImageSource Source
         {
             get { return (ImageSource)GetValue(SourceProperty); }
             set { SetValue(SourceProperty, value); }
         }

         // Using a DependencyProperty as the backing store for Source.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty SourceProperty =
             DependencyProperty.Register("Source", typeof(ImageSource), typeof(RadioImageButton), null);

         //选中图片
         public ImageSource SourceChecked
         {
             get { return (ImageSource)GetValue(SourceCheckedProperty); }
             set { SetValue(SourceCheckedProperty, value); }
         }

         // Using a DependencyProperty as the backing store for SourceChecked.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty SourceCheckedProperty =
             DependencyProperty.Register("SourceChecked", typeof(ImageSource), typeof(RadioImageButton), null);

         //选中文字颜色
         public SolidColorBrush ForegroundChecked
         {
             get { return (SolidColorBrush)GetValue(ForegroundCheckedProperty); }
             set { SetValue(ForegroundCheckedProperty, value); }
         }

         // Using a DependencyProperty as the backing store for ForegroundChecked.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty ForegroundCheckedProperty =
             DependencyProperty.Register("ForegroundChecked", typeof(SolidColorBrush), typeof(RadioImageButton), new PropertyMetadata(new SolidColorBrush(Colors.Black)));

         //图片宽度
         public double ImageWidth
         {
             get { return (double)GetValue(ImageWidthProperty); }
             set { SetValue(ImageWidthProperty, value); }
         }

         // Using a DependencyProperty as the backing store for ImageWidth.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty ImageWidthProperty =
             DependencyProperty.Register("ImageWidth", typeof(double), typeof(RadioImageButton), new PropertyMetadata());

         public double ImageHeight
         {
             get { return (double)GetValue(ImageHeightProperty); }
             set { SetValue(ImageHeightProperty, value); }
         }

         // Using a DependencyProperty as the backing store for ImageHeight.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty ImageHeightProperty =
             DependencyProperty.Register("ImageHeight", typeof(double), typeof(RadioImageButton), new PropertyMetadata());

         public Thickness ImageMargin
         {
             get { return (Thickness)GetValue(ImageMarginProperty); }
             set { SetValue(ImageMarginProperty, value); }
         }

         // Using a DependencyProperty as the backing store for ImageMargin.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty ImageMarginProperty =
             DependencyProperty.Register("ImageMargin", typeof(Thickness), typeof(RadioImageButton), null);

     }
 }

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

 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Demo.UWP"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:mycontrols="using:Demo.UWP.Controls"
     mc:Ignorable="d">
     <Style x:Key="RadioImageButtonStyle1" TargetType="mycontrols:RadioImageButton">
         <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" />
         <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" />
         <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" />
         <Setter Property="Padding" Value="" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Top" />
         <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
         <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
         <Setter Property="MinWidth" Value="" />
         <Setter Property="UseSystemFocusVisuals" Value="True" />
         <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="mycontrols:RadioImageButton">
                     <Grid
                         x:Name="RootGrid"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="auto" />
                             <RowDefinition Height="*" />
                         </Grid.RowDefinitions>
                         <Image
                             x:Name="ImageFront"
                             Width="{TemplateBinding ImageWidth}"
                             Height="{TemplateBinding ImageHeight}"
                             Margin="{TemplateBinding ImageMargin}"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             Source="{TemplateBinding Source}"
                             Stretch="Uniform" />
                         <ContentPresenter
                             x:Name="ContentPresenter"
                             Grid.Row=""
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             AutomationProperties.AccessibilityView="Raw"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             ContentTransitions="{TemplateBinding ContentTransitions}"
                             Foreground="{TemplateBinding Foreground}"
                             TextWrapping="Wrap" />
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CheckStates">
                                 <VisualState x:Name="Checked">
                                     <VisualState.Setters>
                                         <!--<Setter Target="ImageBack.Visibility" Value="Visible"/>
                                         <Setter Target="ImageFront.Visibility" Value="Collapsed"/>-->
                                         <Setter Target="ImageFront.Source" Value="{Binding SourceChecked, RelativeSource={RelativeSource TemplatedParent}}" />
                                         <Setter Target="ContentPresenter.Foreground" Value="{Binding ForegroundChecked, RelativeSource={RelativeSource TemplatedParent}}" />
                                     </VisualState.Setters>
                                     <!--<Storyboard>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageBack" Storyboard.TargetProperty="Visibility">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="Visible" />
                                         </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageFront" Storyboard.TargetProperty="Visibility">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="Collapsed" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>-->
                                 </VisualState>
                                 <VisualState x:Name="Unchecked" />
                                 <VisualState x:Name="Indeterminate" />
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </ResourceDictionary>

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

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

 <Grid>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="auto" />
                         <ColumnDefinition Width="auto" />
                         <ColumnDefinition Width="auto" />
                         <ColumnDefinition Width="auto" />
                     </Grid.ColumnDefinitions>
                     <mycontrols:RadioImageButton
                         Grid.Row=""
                         Margin=""
                         Checked="RadioImageButton_Checked"
                         Content="首页"
                         FontSize=""
                         FontWeight="Normal"
                         ForegroundChecked="Orange"
                         ImageHeight=""
                         ImageMargin=""
                         ImageWidth=""
                         Source="ms-appx:///Assets/Main/main_index_home_normal.png"
                         SourceChecked="ms-appx:///Assets/Main/main_index_home_pressed.png"
                         Style="{StaticResource RadioImageButtonStyle1}" />
                     <mycontrols:RadioImageButton
                         Grid.Column=""
                         Margin=""
                         Content="品质优惠"
                         FontSize=""
                         FontWeight="Normal"
                         ForegroundChecked="Orange"
                         ImageHeight=""
                         ImageMargin=""
                         ImageWidth=""
                         Source="ms-appx:///Assets/Main/main_index_quality_normal.png"
                         SourceChecked="ms-appx:///Assets/Main/main_index_quality_pressed.png"
                         Style="{StaticResource RadioImageButtonStyle1}" />
                     <mycontrols:RadioImageButton
                         Grid.Column=""
                         Margin=""
                         Content="发现"
                         FontSize=""
                         FontWeight="Normal"
                         ForegroundChecked="Orange"
                         ImageHeight=""
                         ImageMargin=""
                         ImageWidth=""
                         Source="ms-appx:///Assets/Main/main_index_search_normal.png"
                         SourceChecked="ms-appx:///Assets/Main/main_index_search_pressed.png"
                         Style="{StaticResource RadioImageButtonStyle1}" />
                     <mycontrols:RadioImageButton
                         Grid.Column=""
                         Margin=""
                         Content="我的"
                         FontSize=""
                         FontWeight="Normal"
                         ForegroundChecked="Orange"
                         ImageHeight=""
                         ImageMargin=""
                         ImageWidth=""
                         Source="ms-appx:///Assets/Main/main_index_my_normal.png"
                         SourceChecked="ms-appx:///Assets/Main/main_index_my_pressed.png"
                         Style="{StaticResource RadioImageButtonStyle1}" />
                 </Grid>

转载请标明出处：http://www.cnblogs.com/xiaocaidev/p/6984375.html，本文出自：【xiaocaidev的博客】