如何对现有控件进行样式重写
展开全部
WPF/Silverlight中使用xaml描述界面,类似Css,它们同样有Style和Template。目前微软开源工具包中集成的均是复杂类型控件,如何修改它们的样式确实难物闹族倒了不少朋友,那么本节以分析为主,结合对常用的NumericUpDown控件向大家讲解。 首先打开工具包中的示例项目:
这时我们需要做罩弊的是抽取其中任意一个被重写过样式的NumericUpDown及其所牵连的所有代码,例如上图中红色圈中的那个,找到它的主体代码如下: <inputToolkit:NumericUpDown Grid.Row="1"Grid.Column="0" Style="{StaticResource ButtonSpinnerHorizontalStyle}" Margin="5"弯基 Height="90" FontSize="50"/> 很显然,它的样式加载的是静态资源中的ButtonSpinnerHorizontalStyle,那么接下来我们查找该静态资源并去掉其中的vsm:VisualStateManager和Border等无关紧要的内容,剩下控件的主要样式如下:<Style x:Key="ButtonSpinnerHorizontalStyle" TargetType="inputToolkit:NumericUpDown">……<Setter Property="Template"><Setter.Value><ControlTemplate TargetType="inputToolkit:NumericUpDown"><Grid>……<inputToolkit:ButtonSpinner x:Name="Spinner" …… Template="{StaticResource ButtonSpinnerHorizontalTemplate}"><TextBox BorderThickness="0" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" MinWidth="20" x:Name="Text" AcceptsReturn="False" Text="{TemplateBinding Value}" TextAlignment="Right" TextWrapping="NoWrap"/></inputToolkit:ButtonSpinner></Grid></ControlTemplate></Setter.Value></Setter></Style> 原来NumericUpDown是由一个包含TextBox的ButtonSpinner构成,而ButtonSpinner加载的样式模板为ButtonSpinnerHorizontalTemplate,接下来我们再次找到ButtonSpinnerHorizontalTemplate,同样的把不必要的部分去掉,关键代码如下:<ControlTemplate x:Key="ButtonSpinnerHorizontalTemplate" TargetType="inputToolkit:ButtonSpinner"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="20"/><ColumnDefinition Width="20"/></Grid.ColumnDefinitions>……<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Grid.Column="0"/><RepeatButton IsTabStop="False" Template="{StaticResource IncreaseButtonTemplate}" x:Name="IncreaseButton" ClickMode="Press" Grid.Column="1"/><RepeatButton IsTabStop="False" Template="{StaticResource DecreaseButtonTemplate}" x:Name="DecreaseButton" ClickMode="Press" Grid.Column="2"/></Grid></ControlTemplate> 它的构造由3部分组成:用于输入数字的内容区域ContentPresenter,以及加值按钮IncreaseButton和减值按钮DecreaseButton。再下来我们还是按照上面的规律忽略无关紧要的代码,不理会TemplateBinding而是直接找到StaticResource对应的Template,以IncreaseButtonTemplate为例,它的关键代码如下:<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton"><Grid x:Name="Root"><Rectangle x:Name="Background" ……><Rectangle.Fill>……</Rectangle.Fill></Rectangle></Grid></ControlTemplate> 现在清楚了吧,原来NumericUpDown控件的加减按钮的原形是RepeatButton,而RepeatButton的原形则是Rectangle,那么我们只需修改Rectangle.Fill的内容,即可改变NumericUpDown加减按钮的样式,这里我使用两张图片作为鼠标进入和离开Rectangle时的Fill填充对象,那么修改后的代码如下:<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton"><Grid x:Name="Root"><Rectangle x:Name="Background" Width="16" Height="16" MouseEnter="Background_MouseEnter" MouseLeave="Background_MouseLeave"><Rectangle.Fill><ImageBrush ImageSource="Images/0.png" /></Rectangle.Fill></Rectangle></Grid></ControlTemplate>//加载图片private BitmapSource GetImage(string imageName) {return new BitmapImage(new Uri(string.Format(@"/Silverlight;component/Images/{0}", imageName), UriKind.Relative));}private void Background_MouseEnter(object sender, MouseEventArgs e) {Rectangle rect = sender as Rectangle;rect.Fill = new ImageBrush() { ImageSource = GetImage("2.png") };}private void Background_MouseLeave(object sender, MouseEventArgs e) {Rectangle rect = sender as Rectangle;rect.Fill = new ImageBrush() { ImageSource = GetImage("0.png") };}
这时我们需要做罩弊的是抽取其中任意一个被重写过样式的NumericUpDown及其所牵连的所有代码,例如上图中红色圈中的那个,找到它的主体代码如下: <inputToolkit:NumericUpDown Grid.Row="1"Grid.Column="0" Style="{StaticResource ButtonSpinnerHorizontalStyle}" Margin="5"弯基 Height="90" FontSize="50"/> 很显然,它的样式加载的是静态资源中的ButtonSpinnerHorizontalStyle,那么接下来我们查找该静态资源并去掉其中的vsm:VisualStateManager和Border等无关紧要的内容,剩下控件的主要样式如下:<Style x:Key="ButtonSpinnerHorizontalStyle" TargetType="inputToolkit:NumericUpDown">……<Setter Property="Template"><Setter.Value><ControlTemplate TargetType="inputToolkit:NumericUpDown"><Grid>……<inputToolkit:ButtonSpinner x:Name="Spinner" …… Template="{StaticResource ButtonSpinnerHorizontalTemplate}"><TextBox BorderThickness="0" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" MinWidth="20" x:Name="Text" AcceptsReturn="False" Text="{TemplateBinding Value}" TextAlignment="Right" TextWrapping="NoWrap"/></inputToolkit:ButtonSpinner></Grid></ControlTemplate></Setter.Value></Setter></Style> 原来NumericUpDown是由一个包含TextBox的ButtonSpinner构成,而ButtonSpinner加载的样式模板为ButtonSpinnerHorizontalTemplate,接下来我们再次找到ButtonSpinnerHorizontalTemplate,同样的把不必要的部分去掉,关键代码如下:<ControlTemplate x:Key="ButtonSpinnerHorizontalTemplate" TargetType="inputToolkit:ButtonSpinner"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="20"/><ColumnDefinition Width="20"/></Grid.ColumnDefinitions>……<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Grid.Column="0"/><RepeatButton IsTabStop="False" Template="{StaticResource IncreaseButtonTemplate}" x:Name="IncreaseButton" ClickMode="Press" Grid.Column="1"/><RepeatButton IsTabStop="False" Template="{StaticResource DecreaseButtonTemplate}" x:Name="DecreaseButton" ClickMode="Press" Grid.Column="2"/></Grid></ControlTemplate> 它的构造由3部分组成:用于输入数字的内容区域ContentPresenter,以及加值按钮IncreaseButton和减值按钮DecreaseButton。再下来我们还是按照上面的规律忽略无关紧要的代码,不理会TemplateBinding而是直接找到StaticResource对应的Template,以IncreaseButtonTemplate为例,它的关键代码如下:<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton"><Grid x:Name="Root"><Rectangle x:Name="Background" ……><Rectangle.Fill>……</Rectangle.Fill></Rectangle></Grid></ControlTemplate> 现在清楚了吧,原来NumericUpDown控件的加减按钮的原形是RepeatButton,而RepeatButton的原形则是Rectangle,那么我们只需修改Rectangle.Fill的内容,即可改变NumericUpDown加减按钮的样式,这里我使用两张图片作为鼠标进入和离开Rectangle时的Fill填充对象,那么修改后的代码如下:<ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton"><Grid x:Name="Root"><Rectangle x:Name="Background" Width="16" Height="16" MouseEnter="Background_MouseEnter" MouseLeave="Background_MouseLeave"><Rectangle.Fill><ImageBrush ImageSource="Images/0.png" /></Rectangle.Fill></Rectangle></Grid></ControlTemplate>//加载图片private BitmapSource GetImage(string imageName) {return new BitmapImage(new Uri(string.Format(@"/Silverlight;component/Images/{0}", imageName), UriKind.Relative));}private void Background_MouseEnter(object sender, MouseEventArgs e) {Rectangle rect = sender as Rectangle;rect.Fill = new ImageBrush() { ImageSource = GetImage("2.png") };}private void Background_MouseLeave(object sender, MouseEventArgs e) {Rectangle rect = sender as Rectangle;rect.Fill = new ImageBrush() { ImageSource = GetImage("0.png") };}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询