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的博客】
UWP 自定义RadioButton实现Tab底部导航的更多相关文章
- UWP自定义RadioButton实现Tab底部导航
先看效果: 参照Android的实现方式用RadioButton来实现,但是Uwp的RadioButton并没有安卓的Selector选择器 下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言 ...
- Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏
在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示: 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...
- tab 切换 和 BottomNavigationBar 自定义 底部导航条
BottomNavigationBar 组件 BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold ...
- android应用开发--------------看RadioGroup源代码,写相似单选选项卡的集成控件(如底部导航,tab等等)
博客为 有时个哥 原创.如需转载请标明出处:http://blog.csdn.net/ls703/article/details/46694967 watermark/2/text/aHR0cDovL ...
- 二、Fragment+RadioButton实现底部导航栏
在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...
- 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化
效果: /** * Flutter BottomNavigationBar 自定义底部导航条.以及实现页面切换: * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...
- muse-ui底部导航自定义图标和字体颜色
最近在鼓捣用vue.js进行混合APP开发,遍寻许久终于找到muse-ui这款支持vue的轻量级UI框架,竟还支持按需引入,甚合萝卜意! 底部导航的点击波纹特效也是让我无比惊喜,然而自定义图标和字体颜 ...
- android开发(1):底部导航条的实现 | navigation tab | activity的创建
底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条. 同样,如果有良好的第三方库,我们应该优先考虑,能用好别 ...
- 微信小程序-自定义底部导航
代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
随机推荐
- nginx学习http_access_module模块
location ~ ^/1.html { root /opt/app/code; deny XXXXX; #这个ip不能访问1.html allow all; #其他的可以访问这个页面1.html ...
- 实现 Application_Start 和 Application_End
理解 ASP.NET Core: 实现 Application_Start 和 Application_End 在 ASP.NET 中两个常用的处理节点是 Application_Start() 和 ...
- 【线程池】自己声明临时线程池一定要shutdown!
场景: 某个定时任务需要多线程执行,执行时间较久且每天只跑一次,想单独拉出一个线程池和其他业务隔离开,交给spring会导致核心线程一直存在 浪费线程资源,因此想单独拉一个池子用完就丢,原本想的是,在 ...
- 浅谈JAVA servlet
1.servlet是什么? servlet的本质是接口,接口就是一种规范.我们来看一下servlet接口中都有哪些函数: 图片来源:https://www.cnblogs.com/whgk/p/639 ...
- 冲刺随笔——Day_Six
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...
- Java 安全之Java Agent
Java 安全之Java Agent 0x00 前言 在前面发现很多技术都会去采用Java Agent该技术去做实现,比分说RASP和内存马(其中一种方式).包括IDEA的这些破解都是基于Java A ...
- 第7.8节 Python中隐秘的类封装方法
前面章节已经介绍了Python中的多态和继承,本节将介绍面向对象程序设计OOP三大特征的另一个特征--封装. 一. 概念 封装是将对象的状态信息(也就是数据.属性)隐藏在对象内部,将对象的属性和 ...
- 使用文件描述符作为Python内置函数open的file实参调用示例
一.关于文件描述符 open()函数的file参数,除了可以接受字符串路径外,还可以接受文件描述符(file descriptor),文件描述符是个整数,对应程序中已经打开的文件. 文件描述符是操作系 ...
- PyQt(Python+Qt)学习随笔:树型部件QTreeWidget中的项编辑方法editTriggers、editItem和openPersistentEditor作用及对比分析
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在树型部件QTreeWidget中,有三种方法触发进行项数据的编辑:editTriggers触发编辑 ...
- PyQt(Python+Qt)学习随笔:QListWidget获取指定项对应行的row方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListWidget的row方法通过项作为参数,获取到对应项所在行的行号,语法如下: int ro ...