0

次のスタイルを再現しようとすると、助けが必要です。

私のカスタムスタイル

赤い海は、テキストボックスが置かれている背景にすぎないため、無視できます。

テキストボックスを作成するには、次の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" />

これにより、アプリケーションで使用する基本的なテキストボックスが作成されますが、テキストボックスの内容を説明する意味のあるテキストをテキストボックスの右側に表示することで、デザインをさらに発展させたいと考えています。したがって、右側に固定する必要があります。側。

4

1 に答える 1

0

これは、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をテキストボックスにオーバーレイし、OnRenderOverrideを使用して自分でテキストボックスに説明を描画します。

Usercontrolアプローチを使用すると、よりクリーンで保守が容易になります。

于 2012-05-15T16:12:39.213 に答える