先看效果：

参照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的博客】

最新文章

  1. Java中普通代码块，构造代码块，静态代码块执行顺序
  2. phpcms无刷新分页
  3. HA-0302 退役
  4. BZOJ 4385: [POI2015]Wilcze doły
  5. MySQL的Order By Rand()的效率问题
  6. .NET转Java
  7. WampServer搭建php环境可能遇到的问题
  8. mac和centos下git安装
  9. ZOJ2930 The Worst Schedule（最小割）
  10. U3D UGUI学习1 - 层级环境
  11. addViewController之后view里面的点击事件不响应
  12. POJ2993——Emag eht htiw Em Pleh(字符串处理+排序)
  13. epub、ocf等常用电子书格式浅析----附JAVA示例程序
  14. 抓取Bing每日图片作为网站首页背景
  15. Delphi实用小function
  16. Js判断密码强度并显示提示信息
  17. 域名变更后获取cookie
  18. 微信支付 - iOS
  19. 跨域请求，jsonp
  20. 【NOI复习】树链剖分

热门文章

  1. 跟着刚哥梳理java知识点——反射和代理（十七）
  2. dotnetcore中的IOptionsSnapshot&lt;&gt;的自动更新原理
  3. [Oracle]LogMiner工具小结
  4. HTML5 模拟现实物理效果
  5. 卷积神经网络CNN总结
  6. 解决初次使用webpack+antd-mobile时css不生效的问题
  7. 二分图的最大匹配——最大流EK算法
  8. Docker - 容器直连
  9. java环境安装之不能安装exe文件
  10. VR全景智慧城市——“海市蜃楼”般的逛街体验