基於WpfToolKit 自定義屬性編輯
阿新 • • 發佈:2018-11-10
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))]