1. 程式人生 > >基於WpfToolKit 自定義屬性編輯

基於WpfToolKit 自定義屬性編輯

Xceed.Wpf.Toolkit 中對 ITypeEditor進行了封裝封裝後的類為TypeEditor<T> ,我們可以通過這個類來達到自定義的目的。 屬性欄中顯示成什麼樣,可以通過自己定義一個相應的控制元件來實現,或者使用現有的控制元件。示例如下

我這裡是通過繼承Button來實現的

    /// <summary>
    /// ImageSelectControl.xaml 的互動邏輯
    /// </summary>
    public partial class ImageSelectButton : Button
    {
        static
ImageSelectButton() { DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageSelectButton), new FrameworkPropertyMetadata(typeof(ImageSelectButton))); } public ImageSelectButton() { InitializeComponent(); DataContext = this; this
.Click += ImageSelectButton_Click; } public string SelectPath { get { return (string)GetValue(SelectPathProperty); } set { SetValue(SelectPathProperty, value); } } // Using a DependencyProperty as the backing store for Path. This enables animation, styling, binding, etc...
public static readonly DependencyProperty SelectPathProperty = DependencyProperty.Register("SelectPath", typeof(string), typeof(ImageSelectButton), new PropertyMetadata("")); private void ImageSelectButton_Click(object sender, RoutedEventArgs e) { //Todo。。。。。 } }

在Xaml裡面可以自定義顯示成什麼樣
Xaml如下:

    <Button.Resources>
        <Style  TargetType="{x:Type local:ImageSelectButton}">
            <Setter Property="Background" Value="White" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Padding"  Value="2,0,0,0" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment"  Value="Center" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="MinHeight" Value="22" />
            <Setter Property="IsTabStop" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid SnapsToDevicePixels="True">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Border Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             Padding="{TemplateBinding Padding}"
                             SnapsToDevicePixels="True">
                                    <ContentPresenter Content="{Binding SelectPath, RelativeSource={RelativeSource TemplatedParent}}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                                </Border>

                                <exitToolkit:ButtonChrome x:Name="ToggleButtonChrome"
                                          Grid.Column="1"
                                          CornerRadius="0,2.75,2.75,0"
                                          RenderEnabled="{Binding IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:ImageSelectButton}}"
                                          RenderMouseOver="{TemplateBinding IsMouseOver}">
                                    <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Grid.Column="1" Margin="5">
                                        <TextBlock Text="....."/>
                                    </Grid>
                                </exitToolkit:ButtonChrome>
                            </Grid>

                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="Gray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Button.Resources>

設定對應屬性的Attribute就可以

    public class ImageEditor : TypeEditor<ImageSelectButton>
    {
        protected override void SetControlProperties()
        {

        }
        protected override void SetValueDependencyProperty()
        {
            ValueProperty = ImageSelectButton.SelectPathProperty;
        }
    }

    public class PropertyGridEditorImageSelect : ImageSelectButton
    {
        static PropertyGridEditorImageSelect()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(PropertyGridEditorImageSelect), new FrameworkPropertyMetadata(typeof(PropertyGridEditorImageSelect)));
        }
    }

使用方式:

 [EditorAttribute(typeof(ImageEditor), typeof(ImageEditor))]