文档章节

Windows Phone 7 控件重写之CheckBox 图片切换

Sean!Zen
 Sean!Zen
发布于 2012/10/10 22:45
字数 686
阅读 1004
收藏 1

CheckBox 在默认的情况下是由一个正方形的框加后面的文字组成的。

在特殊的情况下,有可能需要我们用图片替换掉前面的正方形框体

不能直接给CheckBox设置背景来实现,参见代码:

<CheckBox Content="你好色彩"  Margin="16,289,275,0" VerticalAlignment="Top" IsChecked="True">
                <CheckBox.Background>
                    <ImageBrush ImageSource="images/check_normal.png"></ImageBrush>
                </CheckBox.Background>
</CheckBox>

选中前:

选中后:

 

注意中间的“对勾”,严重影响视觉效果!先来看重写CheckBox之后的效果图:

来看代码吧。

样式

<phone:PhoneApplicationPage.Resources>
		<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Padding" Value="10,3,10,5"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ButtonBase">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton">
			<Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Padding" Value="0"/>
		</Style>
		<Style x:Key="CheckBoxStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="CheckBox">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="CheckBox">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="CheckStates">
									<VisualState x:Name="Checked">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckMark">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unchecked"/>
									<VisualState x:Name="Indeterminate">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateMark">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
								<Grid.ColumnDefinitions>
									<ColumnDefinition Width="40"/>
									<ColumnDefinition Width="*"/>
								</Grid.ColumnDefinitions>

                                <Border x:Name="CheckBackground" BorderBrush="{TemplateBinding Background}" BorderThickness="0" HorizontalAlignment="Left" Height="40" IsHitTestVisible="False" VerticalAlignment="Center" Width="40">
                                    <Border.Background>
                                        <ImageBrush ImageSource="images/check_normal.png"></ImageBrush>
                                    </Border.Background>
                                </Border>
                                <Rectangle x:Name="IndeterminateMark" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" HorizontalAlignment="Center" Height="0" IsHitTestVisible="False" Grid.Row="0" Visibility="Collapsed" VerticalAlignment="Center" Width="0"/>
                                <Canvas x:Name="CheckMark" HorizontalAlignment="Center" Height="40" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="40">
                                    <Canvas.Background>
                                        <ImageBrush ImageSource="images/check_checked.png"></ImageBrush>
                                    </Canvas.Background>
                                </Canvas>
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,0,0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Grid>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</phone:PhoneApplicationPage.Resources>

调用

<CheckBox Content="你好色彩" Margin="16,89,275,0" VerticalAlignment="Top" IsChecked="True" Style="{StaticResource CheckBoxStyle1}"></CheckBox>

© 著作权归作者所有

共有 人打赏支持
Sean!Zen
粉丝 6
博文 4
码字总数 1868
作品 0
南京
程序员
加载中

评论(2)

Injection
Injection
自定义的控件怎么使用呢?
任意球
任意球
支持
Windows Phone 7 - 控件的不同类型

原文地址:http://create.msdn.com/en-US/education/quickstarts/TypesofControls 【译 者注:这篇文章是翻译自微软官方的WP7 QuickStart的第四篇,讲述WP下控件的不同的类型。部分内容加入了...

虫虫
2012/02/21
430
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
Windows Phone 7 控件重写之Button 图片按钮

Windows Phone 自带的Button样式很优雅很大气,而且和整体的风格也很一致。但是,个性化定制的界面有时候需要其他的“特殊”要求。比如图片按钮,由于个性化程度较高,直接套用现在的Button的...

Sean!Zen
2012/10/18
0
0
[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏,这段译文翻译自《UI Design and Interaction Guide for Windows Phone 7 Series》,翻译活动由http://www.wpmind.com/ 的站长小指发起,...

长平狐
2012/08/21
241
0
Windows Phone 7 - 工程结构

像学习Android 一样也必须先把Windows Phone 7的工程结构了解清楚才好,Windows Phone 7的项目结构以一个最标准的WP7应用为例,截图如下: 把其中一些对应的文件展开如下: 下面一起来了解一...

阿酷
2011/12/29
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

腾讯投资最高1.75亿美元正式进军菲律宾移动支付市场

菲律宾长途电话公司(PLDT)公司今日宣布,中国互联网巨头腾讯和私募股权公司KKR将获得该公司旗下金融科技公司Voyager Innovations的少数股权。 PLDT在一份声明中称:“腾讯和KKR最多将分别收...

linuxCool
8分钟前
0
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 正则介绍 正则就是一串有规律的字符...

hhpuppy
19分钟前
0
0
J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接

一直以来 J2Cache 都是使用 Jedis 连接 Redis 服务的。Jedis 是一个很老牌的 Redis 的 Java 开发包,使用很稳定,作者维护很勤勉,社区上能搜到的文章也非常非常多。算是使用范围最广的 Redi...

红薯
55分钟前
7
0
一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
今天
1
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部