文档章节

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/Types_of_Controls 【译 者注:这篇文章是翻译自微软官方的WP7 QuickStart的第四篇,讲述WP下控件的不同的类型。部分内容加入...

虫虫
2012/02/21
440
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
314
0
Windows Phone 7 - 工程结构

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

阿酷
2011/12/29
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

多线程的实现方式

多线程是指 一个程序运行时,产生或使用了不止一个线程。 线程的生命周期是怎么样的,下面这张图我们可以看出些端倪: 这章我们主要讨论多线程实现的方式,基础知识部分我们可以下来再恶补。...

搬砖大侠
5分钟前
0
0
新人千万不要在 Windows 上使用 Ruby on Rails

标题:新人千万不要在 Windows 上使用 Ruby on Rails 副标题:鼓励新人在 Linux 和 Mac 上使用 Ruby on Rails ! 原则:要走寻常路,不要学美特斯邦伟! "在 Windows上 使用 Ruby on Rails "是...

Jason909
13分钟前
0
0
day177-2018-12-14-英语流利阅读-待学习

艾滋病的治愈方法是否触手可及? Daniel 2018-12-14 1.今日导读 几十年来,艾滋病一直是世界上最难对付的“超级绝症”之一,从人类历史上第一次诊断出艾滋病病例的 20 世纪 80 年代早期到 20...

飞鱼说编程
39分钟前
7
0
java 合成两张图片或图片与二维码

java中偶尔会出现需要将一张小图片嵌入大图中或带二维码的海报图片,那么本文就是奔着这个目的来的,直接上腊肉! zxing是生成1D和2D条形或二维码的工具类库,java图形库Graphics2D进行图片的...

貔貅叔
44分钟前
4
0
80后阿里P10,“关老板”如何带着MaxCompute一路升级?

我是个幸运的人。虽然幸运不能被复制,但是眼光和努力可以。 关涛/关老板,80后的阿里P10,阿里巴巴通用计算平台负责人,阿里巴巴计算平台研究员。12年职场人生,微软和阿里的选择。 关涛的花...

阿里云官方博客
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部