创建分层自定义控件模板 (WPF 4 / .net 4.0 / C#)

Question

我需要一些帮助来尝试重新创建以下样式：

红海可以忽略，因为它只是文本框所在的背景。

要创建文本框，我使用以下 xaml：

            <TextBox Name="tbSorageName"
                     Grid.Column="1"
                     Width="250"
                     Height="30"
                     Margin="0"
                     HorizontalAlignment="Left"
                     VerticalAlignment="Top"
                     IsReadOnly="True"
                     Style="{StaticResource MainTextBoxStyle}"
                     Text="{Binding SelectedStorage.Name,
                                    Mode=OneWay,
                                    UpdateSourceTrigger=PropertyChanged}" />

为了给它设置样式，我使用了以下样式：

<Style x:Key="MainTextBoxStyle" TargetType="TextBox">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Foreground" Value="Snow" />
    <Setter Property="FontFamily" Value="Calibri" />
    <Setter Property="TextAlignment" Value="Center" />
    <Setter Property="Background" Value="{DynamicResource MainTextBox_BGBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource MainTextBox_BorderBrush}" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="TextAlignment" Value="Left" />
</Style>

我使用的笔刷是：

<SolidColorBrush x:Key="MainTextBox_BGBrush" Color="#3A3A3A" />
<SolidColorBrush x:Key="MainTextBox_BorderBrush" Color="#656565" />

这创建了我在应用程序中使用的基本文本框，但我想通过在文本框右侧浮动一些描述文本框内容的有意义的文本来进一步改进我的设计 - 所以它应该锚定到右手边。

Answer 1

您可以通过 2 种方法轻松做到这一点。

1.创建一个由文本框和文本块组成的用户控件。 UserControl 的 Xaml 类似于以下内容

<Grid Width="{Binding Path=Width, ElementName=tbSorageName}" Height="{Binding Path=Height, ElementName=tbSorageName}">
   <TextBox Name="tbSorageName"
                 Grid.Column="1"
                 Width="250"
                 Height="30"
                 Margin="0"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top"
                 IsReadOnly="True"
                 Style="{StaticResource MainTextBoxStyle}"
                 Text="hello" />
    <TextBlock HorizontalAlignment="Right" Margin="5" Foreground="Red" FontStyle="Italic">Name</TextBlock>
</Grid>

2.在文本框上覆盖Adorner，并通过 OnRender Override 自己在文本框上绘制描述。

我会使用 Usercontrol 方法，因为它更干净且更易于维护。