ControlTemplate中的控件如何Binding后台自定义依赖属性

来源:互联网 发布:淘宝古风福袋哪家好 编辑:程序博客网 时间:2024/05/12 10:30

随着项目界面的美观话,一般的window窗体样式已经满足不了现在的需求,所以需要我们自己定义window的样式。但是之前的窗口标题(WindowTitle)这个属性仍需体现。下面在保证自定义窗体样式的前提下,同时也需实现窗口标题这个需求提供实现方案。

首先我们需要创建自定义控件。创建一个ResourceDictionary.xaml 来定义window的样式。如代码:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Styles="clr-namespace:SmartRecognition.Styles">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/SmartRecognition.Styles;component/Brushes.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <ControlTemplate x:Key="userWindowTemplate"
                     TargetType="{x:Type Styles:UserWindow}">
        <Grid x:Name="grdLayRoot"
              Margin="20"
              Width="690"
              Height="343">

             <Viewbox x:Name="vbMain"
                     Stretch="Fill">
                   <Grid VerticalAlignment="Stretch"
                      HorizontalAlignment="Stretch">
                    <Border x:Name="brdRoot"
                            CornerRadius="10"
                            BorderThickness="2"
                            Background="{StaticResource bgBrush}"
                            BorderBrush="{StaticResource BrdBrush}"
                            RenderTransformOrigin="0.5,0.5">

                         <Grid x:Name="grdLayOutRoot">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid x:Name="grdHeader"
                                  Margin="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Image Source="/SmartRecognition.Resources;component/Images/Common/logoIcon.png"
                                       Height="49"
                                       Width="50" />
                                <StackPanel Grid.Column="1"
                                            Margin="10,10,0,0">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="8*" />
                                            <ColumnDefinition Width="2*" />
                                        </Grid.ColumnDefinitions>
                                       <TextBlock Text="{Binding TitleContent,Mode=OneWay,RelativeSource={RelativeSource TemplatedParent}}"
                                                   FontSize="22" />
                                        <Styles:ImageButton x:Name="btnClose"
                                                            Grid.Column="1"
                                                            Height="22"
                                                            Width="26"
                                                            HorizontalAlignment="Right"
                                                            ImageNormal="pack://application:,,,/SmartRecognition.Resources;component/Images/Common/imgBtnClose.png"
                                                            ImageNormald="pack://application:,,,/SmartRecognition.Resources;component/Images/Common/imgBtnClose.png" />
                                    </Grid>

                                </StackPanel>
                            </Grid>
                            <Grid x:Name="grdContent"
                                  Grid.Row="1"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Grid>
                        </Grid>
                    </Border>
                </Grid>
            </Viewbox>
        </Grid>
    </ControlTemplate>
    <Style  x:Key="userWindowStyle"
            TargetType="{x:Type Styles:UserWindow}">
        <Setter Property="Template"
                Value="{StaticResource userWindowTemplate}" />
    </Style>

    <Style TargetType="{x:Type Control}" />
</ResourceDictionary>

该代码定义了window的样式,包括有个title属性,一个关闭按钮,然后就是ContentPresenter。

那么让我们详细说说title是如何实现的,首先我们在.cs文件中创建一个依赖属性,如代码

public string TitleContent
            {
                get { return (string)GetValue(TitleContentProperty); }
                set { SetValue(TitleContentProperty, value); }
            }

            // Using a DependencyProperty as the backing store for TitleContent.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty TitleContentProperty =
                DependencyProperty.Register("TitleContent", typeof(string), typeof(UserWindow), new PropertyMetadata(null));

那么后台代码如何绑定到ContentTemplent中的控件属性上呢。

代码如下:

<TextBlock Text="{Binding TitleContent,Mode=OneWay,RelativeSource={RelativeSource TemplatedParent}}"
FontSize="22" />

TemplatedParent:定义相应的常数,用以描述绑定源相对于绑定目标的位置。

说明了目标元素绑定的源数据的来源位置。

引用应用了模板(其中有数据绑定元素)的元素。这类似于设置 TemplateBinding 标记扩展,并仅当Binding 在模板中时适用。

原创粉丝点击