轉帖|其它|編輯:郝浩|2011-05-24 11:44:45.000|閱讀 2177 次
概述:在創建用戶控件時,我們難免會創建依賴項屬性,這樣有利于用戶控件的靈活性,例如:我寫了一個控件MenuButton,這個MenuButton就是為Button寫了一個模板,Image用來顯示圖片,ContentPresenter用來顯示文本。我們肯定不是在用戶控件中將圖片和文字預先設置好,而是通過用戶控件屬性來設置,在這里說一些額外的話,建議用依賴項屬性,因為依賴項屬性支持例如:設計器集成、Binding、動畫、樣式、動態資源等,而屬性則不支持的。看以下MenuButton.xaml代碼片段:
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
在創建用戶控件時,我們難免會創建依賴項屬性,這樣有利于用戶控件的靈活性,例如:我寫了一個控件MenuButton,這個MenuButton就是為Button寫了一個模板,Image用來顯示圖片,ContentPresenter用來顯示文本。我們肯定不是在用戶控件中將圖片和文字預先設置好,而是通過用戶控件屬性來設置,在這里說一些額外的話,建議用依賴項屬性,因為依賴項屬性支持例如:設計器集成、Binding、動畫、樣式、動態資源等,而屬性則不支持的。看以下MenuButton.xaml代碼片段:
<UserControl
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d= "//schemas.microsoft.com/expression/blend/2008"
xmlns:mc= "//schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local= "clr-namespace:SL.Application"
mc:Ignorable= "d"
x:Class= "SL.Application.MenuButton">
<UserControl.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="rectangle" Fill="#FFCCCCD6"
Height="41" RadiusX="8" RadiusY="8" Stroke="#FF5A5353"/>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Center" Height="32"
Margin="10,0,0,0" Source="{Binding Source}"
Stretch="Fill" Width="32" VerticalAlignment="Center"/>
<ContentPresenter VerticalAlignment="Center"
Width="22" Margin="10,0" Content="{Binding Text}"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Button Style="{StaticResource ButtonStyle}"/>
</Grid>
</UserControl>
對應的MenuButton.xaml.cs代碼片段:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SL.Application
{
public partial class MenuButton : UserControl
{
public MenuButton()
{
// 為初始化變量所必需
InitializeComponent();
}
public static readonly DependencyProperty SourceProperty =
DependencyProperty.Register( "Source", typeof(ImageSource),
typeof(MenuButton),
new PropertyMetadata(default(ImageSource)));
public ImageSource Source
{
get { return (ImageSource)GetValue(SourceProperty); }
set { SetValue(SourceProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register( "Text", typeof(string), typeof(MenuButton),
new PropertyMetadata(default(string)));
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
}
}
該準備的咱們也準備好了,現在進入主題,如何將自定義的依賴項屬性Source綁定到Image,Text綁定到Content上?在這里在啰唆一句,以下每種方法修改的代碼都是以上面所指出的代碼為根本,就是在開始每種方法前請將代碼還原成以上代碼。
第一種方法:在XAML中為UserControl指定x:Name值,Binding通過ElementName進行綁定。
好吧,如上所說,我們為UserControl指定x:Name值,如下(改動的代碼是藍色的):
MenuButton.xaml文件:
<UserControl
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d= "//schemas.microsoft.com/expression/blend/2008"
xmlns:mc= "//schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local= "clr-namespace:SL.Application"
mc:Ignorable= "d"
x:Class= "SL.Application.MenuButton" x:Name="UserControl_MenuButton">
修改Image和ContentPresenter的Binding,代碼如下(改動的代碼是藍色的):
MenuButton.xaml文件
<Image HorizontalAlignment="Center" Height="32"
Margin="10,0,0,0" Source="{Binding ElementName=UserControl_MenuButton,
Path=Source}" Stretch="Fill" Width="32" VerticalAlignment="Center"/>
<ContentPresenter VerticalAlignment="Center"
Width="22" Margin="10,0" Content="{Binding ElementName=
UserControl_MenuButton, Path=Text}"/>
如上,就可以將依賴項屬性Source和Text綁定到Image和ContentPresenter上。不過這種方式有一個致命的缺點就是:當這個自定義控件在同一個頁面有1個以上時,偶爾會拋出已經定義UserControl_MenuButton異常。所以這種方式不可取。
第二種方法:在MenuButton.xaml.cs中的MenuButton實例構造器中將this.DataContext=this;這樣,其實和上一種實現的方式差不多,不過這樣不用為UserControl指定x:Name值,也不會出現上面所提到的神馬已經定義UserControl_MenuButton異常。看下面代碼(改動的代碼是藍色的):
MenuButton.xaml.cs文件
public MenuButton()
{
// 為初始化變量所必需
InitializeComponent();
this.DataContext = this;
}
這種方法也不錯,不過有的家伙比喜歡(不喜歡在后臺寫代碼,能在XAML中實現的絕不在.cs文件中實現)。
第三種方法:在XAML中設置UserControl的DataContext綁定自身。請看一下代碼:
MenuButton.xaml文件:
<UserControl
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "//schemas.microsoft.com/winfx/2006/xaml"
xmlns:d= "//schemas.microsoft.com/expression/blend/2008"
xmlns:mc= "//schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local= "clr-namespace:SL.Application"
mc:Ignorable= "d"
x:Class= "SL.Application.MenuButton"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:博客園