在WPF中创建自定义UI元素
本文关键字:UI 元素 自定义 创建 WPF | 更新日期: 2023-09-27 18:04:17
我的代码中有几个TextBoxes
和Labels
,它们是用以下XAML实现的:
<DockPanel HorizontalAlignment="Right">
<TextBlock Foreground="Black" Padding="0,0,10,0">Serial Number:</TextBlock>
<TextBox Width="150" IsReadOnly="True" BorderBrush="Gainsboro" Height="20"></TextBox>
</DockPanel>
我可以通过以下方式减少一些复制的代码:
<DockPanel HorizontalAlignment="Right">
<TextBlock Style="{StaticResource CstmTextBoxLbl}">Serial Number:</TextBlock>
<TextBox Style="{StaticResource CstmTextBox}"></TextBox>
</DockPanel>
,但它仍然有点长。是否可以这样做:
<controls:CstmTextBox Style="{StaticResource CstmTextBox}" LabelText="Serial Number:" Text=""/>
其中CstmTextBox
将实现获得相同视觉效果所需的任何XAML,并且我可以访问代码中的TextBlock
文本和TextBox
文本。如
CstmTextBox textbox;
textbox.LabelText = "Serial Number:";
String some_text = textbox.Text;
textbox.Text = "....";
将UserControl
添加到您的解决方案中,并复制您想要重用的XAML。
如果您将x:Name
设置为UserControl
中的控件…
<UserControl ... >
<DockPanel HorizontalAlignment="Right">
<TextBlock x:Name="SerialNumberTextBlock" Style="{StaticResource CstmTextBoxLbl}">Serial Number:</TextBlock>
<TextBox x:Name="SerialNumberTextBox" Style="{StaticResource CstmTextBox}"></TextBox>
</DockPanel>
</UserControl>
…您可以从外部(代码后)访问它们,像这样:
CstmTextBox textbox;
textbox.SerialNumberTextBlock.Text = "Serial Number:";
String some_text = textbox.SerialNumberTextBox.Text;
textbox.SerialNumberTextBox.Text = "....";
但是如果您为想要公开的属性创建DependencyProperties就更好了。您可以在UserControl的代码后面定义这些属性:
public string Text
{
get
{
return (string)GetValue(TextProperty);
}
set
{
SetValue (TextProperty, value);
}
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof (CstmTextBox));
然后将这些属性绑定到UserControl中的控件:
<UserControl x:Name="Root" ... >
<DockPanel HorizontalAlignment="Right">
<TextBlock x:Name="SerialNumberTextBlock" Style="{StaticResource CstmTextBoxLbl}"
Text="{Binding LabelText, ElementName=Root}" />
<TextBox x:Name="SerialNumberTextBox" Style="{StaticResource CstmTextBox}"
Text="{Binding Text, ElementName=Root, Mode=TwoWay}" />
</DockPanel>
</UserControl>
这样就可以直接从外部设置属性,无论是代码隐藏,XAML还是Binding。
UserControl或CustomControl满足您的需求。这是CustomControl的代码。
c#:public class CstmTextBox : Control
{
public string LabelText
{
get
{
return (string)GetValue (LabelTextProperty);
}
set
{
SetValue (LabelTextProperty, value);
}
}
public static readonly DependencyProperty LabelTextProperty =
DependencyProperty.Register ("LabelText", typeof (string), typeof (CstmTextBox), new PropertyMetadata (string.Empty));
public string Text
{
get
{
return (string)GetValue (TextProperty);
}
set
{
SetValue (TextProperty, value);
}
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register ("Text", typeof (string), typeof (CstmTextBox), new PropertyMetadata (string.Empty));
}
XAML: <Style TargetType="{x:Type controls:CstmTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:CstmTextBox}">
<DockPanel HorizontalAlignment="Right">
<TextBlock Foreground="Black" Padding="0,0,10,0" Text="{TemplateBinding LabelText}"/>
<TextBox Width="150" IsReadOnly="True" BorderBrush="Gainsboro" Height="20" Text="{TemplateBinding Text}"/>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
将样式添加到资源中,并使用新的控件:
<controls:CstmTextBox LabelText="abcde" Text="1234"/>