WPF開發技巧之花式控件功能擴展詳解
文章默認你已經入門WPF瞭
WPF日常開發,經常遇到默認的控件功能不滿足需求,怎麼辦?
No1. 自定義控件模板
平時開發中,經常遇到比較”俗“的需求,嫌棄控件默認的樣子。怎麼辦?哈哈,那就整個容唄….. 😜!
還記得心靈深處的Button嗎?是不是第一印象就是規規矩矩的長方形,好瞭,這次我們俗一下,把它變成圓形!
上代碼:
<Button Content="Test1" Width="80" Height="80" FocusVisualStyle="{x:Null}" Background="LightSeaGreen" BorderBrush="DarkBlue"> <Button.Template> <ControlTemplate TargetType="ButtonBase"> <Grid> <Ellipse x:Name="ellipseBorder" StrokeThickness="1" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Stroke" Value="Orange" TargetName="ellipseBorder"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Stroke" Value="OrangeRed" TargetName="ellipseBorder"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button>
上外表:
No2. 重寫控件
很多情況下,並不是把控件換個外貌就可以解決的,我們不僅要改變外貌,還要改變控件的功能,比如說我們經常用的TextBox控件,正常的功能就是用來輸入的,但更人性化點,我們想要TextBox能告訴我們當前的文本框應該輸入用戶名呢,還是地址呢等等。其實這個就是我們經常看到的水印功能,水印文字肯定要能按需設置,那我們不可能簡單的通過改變下控件模板就可以解決的。
通過需求我們知道,新的帶水印的文本框,至少有個水印這麼個依賴屬性,供外部設置。當然新的帶水印文本框和TextBox大概的樣子差不多,但我們也要為新的控件定義外貌。
所以第一步,先定義控件的功能,上代碼:
public class WaterMarkTextBox : TextBox { static WaterMarkTextBox() { DefaultStyleKeyProperty.OverrideMetadata(typeof(WaterMarkTextBox), new FrameworkPropertyMetadata(typeof(WaterMarkTextBox))); } public string WaterMark { get { return (string)GetValue(WaterMarkProperty); } set { SetValue(WaterMarkProperty, value); } } // Using a DependencyProperty as the backing store for WaterMark. This enables animation, styling, binding, etc... public static readonly DependencyProperty WaterMarkProperty = DependencyProperty.Register("WaterMark", typeof(string), typeof(WaterMarkTextBox), new PropertyMetadata(null)); }
第二步,再定義控件的樣子,上代碼:
<Style TargetType="{x:Type local:WaterMarkTextBox}"> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:WaterMarkTextBox}"> <Grid> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> </Border> <ScrollViewer x:Name="PART_ContentHost" Grid.Column="0" Margin="0" Padding="{TemplateBinding Padding}" VerticalAlignment="Stretch" Background="{x:Null}" BorderThickness="0" IsTabStop="False" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <TextBlock x:Name="PART_Message" Margin="4 0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Center" Foreground="Gray" Text="{TemplateBinding WaterMark}" Visibility="Collapsed" /> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value=""> <Setter TargetName="PART_Message" Property="Visibility" Value="Visible" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
請註意Name為PART_Message的TextBlock就是用來呈現水印提示消息的,同時加瞭個觸發器,實現這樣的功能:如果未輸入任何內容,則顯示水印,否則就隱藏水印。
控件使用,上代碼:
<local:WaterMarkTextBox Margin="20,0,0,0" Width="200" Height="50" WaterMark="Please Input your name"/>
上效果:
No3. 附加屬性來試試
重寫控件看似很完美瞭,真的是這樣嗎?
好瞭,我的需求又來瞭,現在文本框提示很perfect,可是我的密碼框PasswordBox也要搞個水印啊?怎麼辦?再重寫個帶水印的密碼框?此時有沒有做相同事情的感覺?作為合格的碼農,我們還是要牢記碼農界的警世名言:Don’t Repeat Yourself!
此時請回憶下WPF的經典知識點:
控件A放到Grid中,A要支持設置行和列,控件B放到Grid中,B也要支持設置行和列。教程中已經告訴我們不要傻不拉幾在A和B中都去定義行和列的屬性,否則後續C、D……沒完沒瞭。
此時就是我們應用附加屬性的時候瞭,在Grid中定義統一的行和列的附加屬性,然後附加應用到A、B上就可以瞭。
反過來看看我們現在的需求,是不是一樣的套路?我是不是在個公共的地方定義個水印WaterMark附加屬性,然後分別應用到文本框和密碼框就可以瞭?說對瞭一半,因為我們文本框和密碼框老的外表沒有顯示水印的地方,所以我們同時還要重新定義下他們的新外表。
話不多說,先上附加屬性定義的代碼:
public class WaterMarkHelper { public static string GetWaterMark(DependencyObject obj) { return (string)obj.GetValue(WaterMarkProperty); } public static void SetWaterMark(DependencyObject obj, string value) { obj.SetValue(WaterMarkProperty, value); } public static readonly DependencyProperty WaterMarkProperty = DependencyProperty.RegisterAttached("WaterMark", typeof(string), typeof(WaterMarkHelper), new PropertyMetadata(null)); }
上TextBox新的樣式:
<Style x:Key="TextBoxWithWaterMark" TargetType="{x:Type TextBox}"> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TextBox}"> <Grid> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> </Border> <ScrollViewer x:Name="PART_ContentHost" Grid.Column="0" Margin="0" Padding="{TemplateBinding Padding}" VerticalAlignment="Stretch" Background="{x:Null}" BorderThickness="0" IsTabStop="False" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <TextBlock x:Name="PART_Message" Margin="4 0" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Center" Foreground="Gray" Text="{TemplateBinding local:WaterMarkHelper.WaterMark}" Visibility="Collapsed" /> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value=""> <Setter TargetName="PART_Message" Property="Visibility" Value="Visible" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
請和自定義控件中的樣式對比下,其實就是PART_Message對應控件的Text綁定的不一樣瞭,這樣綁定的是TextBox的附加屬性WaterMarkHelper.WaterMark
上應用代碼:
<TextBox Style="{StaticResource TextBoxWithWaterMark}" Margin="20,0,0,0" Width="200" Height="50" local:WaterMarkHelper.WaterMark="Please Input your name"/>
請註意,這樣要手動明確應用定義的樣式資源!
上效果:
課後作業:請依葫蘆畫瓢,實現PasswordBox的水印功能 😆
總結
除瞭這裡列舉的三種方式,其實還可以通過Behavior行為功能,擴展一個控件的功能,比如著名的拖拽功能!寫到這裡,我想總結的是:工欲善其事必先利其器!
當我們基礎紮實之後,我們真的可以跳出柵欄,靈活應用!
到此這篇關於WPF日常開發之花式控件功能擴展的文章就介紹到這瞭,更多相關WPF花式控件功能擴展內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- c# WPF中CheckBox樣式的使用總結
- 在C# WPF下自定義滾動條ScrollViewer樣式的操作
- C# WPF 自定義按鈕的方法
- c# WPF中自定義加載時實現帶動畫效果的Form和FormItem
- WPF實現環(圓)形菜單的示例代碼