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

于 2014-02-17 14:16:17 发布
阅读量976 收藏
点赞数
分类专栏： windows phone 自定义控件学习

原文:http://my.oschina.net/SeanZen/blog/82410

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

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

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

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

选中前：

选中后：

 

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

来看代码吧。

样式

001 <phone:PhoneApplicationPage.Resources>
002         <Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
003             <Setter Property="Background" Value="Transparent"/>
004             <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
005             <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
006             <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
007             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
008             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
009             <Setter Property="Padding" Value="10,3,10,5"/>
010             <Setter Property="Template">
011                 <Setter.Value>
012                     <ControlTemplate TargetType="ButtonBase">
013                         <Grid Background="Transparent">
014                             <VisualStateManager.VisualStateGroups>
015                                 <VisualStateGroup x:Name="CommonStates">
016                                     <VisualState x:Name="Normal"/>
017                                     <VisualState x:Name="MouseOver"/>
018                                     <VisualState x:Name="Pressed">
019                                         <Storyboard>
020                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
021                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
022                                             </ObjectAnimationUsingKeyFrames>
023                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
024                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
025                                             </ObjectAnimationUsingKeyFrames>
026                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
027                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
028                                             </ObjectAnimationUsingKeyFrames>
029                                         </Storyboard>
030                                     </VisualState>
031                                     <VisualState x:Name="Disabled">
032                                         <Storyboard>
033                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
034                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
035                                             </ObjectAnimationUsingKeyFrames>
036                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
037                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
038                                             </ObjectAnimationUsingKeyFrames>
039                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
040                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
041                                             </ObjectAnimationUsingKeyFrames>
042                                         </Storyboard>
043                                     </VisualState>
044                                 </VisualStateGroup>
045                             </VisualStateManager.VisualStateGroups>
046                             <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
047                                 <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
048                             </Border>
049                         </Grid>
050                     </ControlTemplate>
051                 </Setter.Value>
052             </Setter>
053         </Style>
054         <Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton">
055             <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
056             <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
057             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
058             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
059             <Setter Property="HorizontalContentAlignment" Value="Left"/>
060             <Setter Property="VerticalContentAlignment" Value="Center"/>
061             <Setter Property="Padding" Value="0"/>
062         </Style>
063         <Style x:Key="CheckBoxStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="CheckBox">
064             <Setter Property="Template">
065                 <Setter.Value>
066                     <ControlTemplate TargetType="CheckBox">
067                         <Grid Background="Transparent">
068                             <VisualStateManager.VisualStateGroups>
069                                 <VisualStateGroup x:Name="CommonStates">
070                                     <VisualState x:Name="Normal"/>
071                                     <VisualState x:Name="MouseOver"/>
072                                     <VisualState x:Name="Disabled">
073                                         <Storyboard>
074                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
075                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxDisabledBrush}"/>
076                                             </ObjectAnimationUsingKeyFrames>
077                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
078                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
079                                             </ObjectAnimationUsingKeyFrames>
080                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
081                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
082                                             </ObjectAnimationUsingKeyFrames>
083                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="IndeterminateMark">
084                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"/>
085                                             </ObjectAnimationUsingKeyFrames>
086                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
087                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
088                                             </ObjectAnimationUsingKeyFrames>
089                                         </Storyboard>
090                                     </VisualState>
091                                 </VisualStateGroup>
092                                 <VisualStateGroup x:Name="CheckStates">
093                                     <VisualState x:Name="Checked">
094                                         <Storyboard>
095                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckMark">
096                                                 <DiscreteObjectKeyFrame KeyTime="0">
097                                                     <DiscreteObjectKeyFrame.Value>
098                                                         <Visibility>Visible</Visibility>
099                                                     </DiscreteObjectKeyFrame.Value>
100                                                 </DiscreteObjectKeyFrame>
101                                             </ObjectAnimationUsingKeyFrames>
102                                         </Storyboard>
103                                     </VisualState>
104                                     <VisualState x:Name="Unchecked"/>
105                                     <VisualState x:Name="Indeterminate">
106                                         <Storyboard>
107                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateMark">
108                                                 <DiscreteObjectKeyFrame KeyTime="0">
109                                                     <DiscreteObjectKeyFrame.Value>
110                                                         <Visibility>Visible</Visibility>
111                                                     </DiscreteObjectKeyFrame.Value>
112                                                 </DiscreteObjectKeyFrame>
113                                             </ObjectAnimationUsingKeyFrames>
114                                         </Storyboard>
115                                     </VisualState>
116                                 </VisualStateGroup>
117                             </VisualStateManager.VisualStateGroups>
118                             <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
119                                 <Grid.ColumnDefinitions>
120                                     <ColumnDefinition Width="40"/>
121                                     <ColumnDefinition Width="*"/>
122                                 </Grid.ColumnDefinitions>
123  
124                                 <Border x:Name="CheckBackground" BorderBrush="{TemplateBinding Background}" BorderThickness="0" HorizontalAlignment="Left" Height="40" IsHitTestVisible="False" VerticalAlignment="Center" Width="40">
125                                     <Border.Background>
126                                         <ImageBrush ImageSource="images/check_normal.png"></ImageBrush>
127                                     </Border.Background>
128                                 </Border>
129                                 <Rectangle x:Name="IndeterminateMark" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" HorizontalAlignment="Center" Height="0" IsHitTestVisible="False" Grid.Row="0" Visibility="Collapsed" VerticalAlignment="Center" Width="0"/>
130                                 <Canvas x:Name="CheckMark" HorizontalAlignment="Center" Height="40" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="40">
131                                     <Canvas.Background>
132                                         <ImageBrush ImageSource="images/check_checked.png"></ImageBrush>
133                                     </Canvas.Background>
134                                 </Canvas>
135                                 <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}"/>
136                             </Grid>
137                         </Grid>
138                     </ControlTemplate>
139                 </Setter.Value>
140             </Setter>
141         </Style>
142     </phone:PhoneApplicationPage.Resources>

调用

1 <CheckBox Content="你好色彩" Margin="16,89,275,0" VerticalAlignment="Top" IsChecked="True" Style="{StaticResource CheckBoxStyle1}"></CheckBox>
子庚
关注
专栏目录
安卓开发 之小白养成-Android基本控件
qq_34506989的博客
09-25 342
TextView控件 Android中专门用来显示文本的控件。 常用属性: android:layout_width=""---控件宽 android:layout_height=""---控件高 android:layout_weight=""---控件权重 android:text=""---控件上的文本内容 android:textColor=""---文本颜色 andr...
WinForm（一） WinForm入门与基本控件使用
m0_67394006的博客
06-18 9548
2.窗口设计与控件布局 3.窗口事件 （1）界面设计（2）逻辑代码 二.WinForm布局开发 3.逻辑事件代码Form.cs 四.图片框与项目资源 1.添加资源
Windows phone8 基础篇（三） 常用控件开发
李保成(Net)
04-01 4804
广告：  为了方便我们大家一起学习和讨论，我开设了一个群300143953。专门关于windows phone开发学习的群。因为群刚建，所以没人。欢迎大家。另外如果出现啥错误性的问题，希望大家能够 指出。毕竟我也是刚刚接触。      Windows phone8 系统中为我们开发提供了丰富的可视化控件，有些控件跟silverlight中的控件大同小异。比如说button等。有些是独有的，比
WindowsPhone自定义控件详解（一） - 控件类库分析
mr_raptor的专栏
02-12 6796
++++++++++++++++++++++++++++++++++++++++++ 本文系本站原创,欢迎转载! 转载请注明出处: http://blog.csdn.net/mr_raptor/article/details/7251942 ++++++++++++++++++++++++++++++++++++++++++ 为了让你的应用程序更有个性，我们通常会在WP7开发过程中会自定义
WindowsPhone自定义控件详解
happyq的专栏
03-06 4135
（一） - 控件类库分析 为了让你的应用程序更有个性，我们通常会在WP7开发过程中会自定义自己风格的控件，自定义控件中设置各种模板，绑定数据，修改控件行为，但是对于很多朋友来说，这么做是为什么? 不是很清楚，看MSDN的话，又一时找不到头绪，本文就是从控件类库的继承关系里来剖析出自定义控件中的为什么？如果你觉得本文观点独特，对你有很大帮助，请顶之，谢谢。   一、 控件分类
Windows Phone 7 使用数据模板DataTemplate进行数据绑定
fs的专栏
01-03 1102
转自：Windows Phone 7 使用数据模板DataTemplate进行数据绑定 一、DataTemplate DataTemplate 类  描述数据对象的可视结构。 命名空间：  System.Windows  XAML     templateContent XAML 值 templateContent  定义此 DataTemplate 的对象树。该树必须有
Windows Phone 7 UI设计和交互规范随笔（1）
困兽之斗
11-15 971
当iPhone和Android在市场上所向披靡的时候，搭载Windows Phone 7的手机也终于进入了市场。我打算写个Windows Phone 7应用试一下，就随便翻了翻Windows Phone 7的SDK，SDK写的很细致，上线也很及时，要是微软其他产品的SDK也能这样就好了。 Windows Phone 7 SDK的许多章节都提示要先阅读《UI Design and Intera
WindowsPhone自定义控件详解（一）- 控件类库分析
liuyang1990i的专栏
10-31 1229
本文转载于：http://blog.csdn.net/mr_raptor/article/details/7251942 为了让你的应用程序更有个性，我们通常会在WP7开发过程中会自定义自己风格的控件，自定义控件中设置各种模板，绑定数据，修改控件行为，但是对于很多朋友来说，这么做是为什么? 不是很清楚，看MSDN的话，又一时找不到头绪，本文就是从控件类库的继承关系里来剖析出自定义控件中的为什
如何使用 Windows Phone 的后退堆栈导航
Kinley.H的专栏
05-06 1295
转自：http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/ff402561(v=vs.105).aspx 源码：Navigate Using the Back Stack for Windows Phone.zip   适用于： Windows Phone 8 | Windows Phone OS 7.1    本主
WindowsPhone导航与控件
05-08
#### 二、Windows Phone 7 导航切换模型 **1. 基础概念** - **PhoneApplicationFrame**: 它是Windows Phone应用程序的主要容器，负责管理应用程序的导航逻辑。 - **PhoneApplicationPage**: 这是应用程序中的单个...
ListView与CheckBox
08-06
CheckBox则是一种复选框控件，通常用于用户选择多个选项。将ListView与CheckBox结合使用，可以创建出类似于手机短信应用中选择联系人进行删除的功能。 1. **ListView基本概念** - ListView是Android提供的一个视图...
数据库基础测验20241113.doc
11-13
数据库基础测验20241113.doc
微信小程序下拉选择组件
11-13
微信小程序下拉选择组件
DICOM文件+DX放射平片-数字X射线图像DICOM测试文件
11-13
DICOM文件+DX放射平片—数字X射线图像DICOM测试文件，文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用，请勿用于非法用途。
Jupyter Notebook《基于双流 Faster R-CNN 网络的 图像篡改检测》+项目源码+文档说明+代码注释
11-13
<项目介绍> - 基于双流 Faster R-CNN 网络的 图像篡改检测 - 不懂运行，下载完可以私聊问，可远程教学 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
使用epf捕获没有CA证书的SSLTLS明文（LinuxAndroid内核支持amd64arm64）.zip
11-13
c语言
(源码)基于Arduino的天文数据库管理系统.zip
11-13
# 基于Arduino的天文数据库管理系统 ## 项目简介 本项目是一个基于Arduino的天文数据库管理系统，旨在为Arduino设备提供一个完整的天文数据库，包括星星、星系、星团等天体数据。项目支持多种语言的星座名称，并提供了详细的天体信息，如赤道坐标、视星等。 ## 项目的主要特性和功能 星座目录包含88个星座，提供拉丁语、英语和法语的缩写和全名。 恒星目录包含494颗亮度达到4等的恒星。 梅西耶目录包含110个梅西耶天体。 NGC目录包含3993个NGC天体，亮度达到14等。 IC目录包含401个IC天体，亮度达到14等。 天体信息每个天体（不包括星座）提供名称、命名、相关星座、赤道坐标（J2000）和视星等信息。 恒星额外信息对于恒星，还提供每年在赤经和赤纬上的漂移以及视差。 ## 安装使用步骤 1. 安装库使用Arduino IDE的库管理器安装本项目的库。 2. 解压数据库将db.zip解压到SD卡中。
(源码)基于JSP和SQL Server的维修管理系统.zip
最新发布
11-13
# 基于JSP和SQL Server的维修管理系统 ## 项目简介 本项目是一个基于JSP和SQL Server的维修管理系统，旨在提供一个高效、便捷的维修管理解决方案。系统涵盖了从维修订单的创建、管理到配件的录入、更新等多个功能模块，适用于各类维修服务行业。 ## 项目的主要特性和功能 1. 用户管理 管理员和客户的注册与登录。 管理员信息的管理与更新。 客户信息的创建、查询与更新。 2. 维修订单管理 维修订单的创建、查询与更新。 维修回执单的创建与管理。 3. 配件管理 配件信息的录入与更新。 配件库存的管理与查询。 4. 评价与反馈 客户对维修服务的评价记录。 系统反馈信息的收集与管理。 5. 数据加密与安全 使用MD5加密算法对用户密码进行加密存储。 通过过滤器实现登录验证，确保系统安全。 ## 安装使用步骤
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值