创建边框样式与集成文本框

本文关键字：文本 集成 边框 样式 创建 | 更新日期: 2023-09-27 18:18:18

我必须为单个窗口使用1800行xhtml定义，我想大幅减少代码量。

有几个控件定义，它们经常被重复，我想为其中的一些写样式。一个例子是集成了TextBox的Border-Definition:

<Border Grid.Column="2" Margin="1,1,5,0" Background="#bbc2ce">
    <my:RibbonTextBox  HorizontalContentAlignment="Center" 
                       IsReadOnly="True" Background="#FAFAFA"  
                       Text="{Binding Path=someViewModel.Item,Mode=OneWay}" 
                       MinHeight="0" FontSize="12" FontWeight="Bold" FontFamily="Arial"/>
</Border>

除了绑定路径，每个值都是一遍又一遍完全相同的。所以我为RibbonTextBox写了这个样式:

<Style TargetType="my:RibbonTextBox" x:Key="StandardRibbonTextBox">
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="IsReadOnly" Value="True" />
    <Setter Property="Background" Value="#FAFAFA" />
    <Setter Property="MinHeight" Value="0" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="FontFamily" Value="Arial" />
</Style>

现在我想为上面的边界写一个样式，并集成RibbonTextBox样式。我到此为止了:

<Style TargetType="Border" x:Key="borderStyle">
    <Setter Property="Background" Value="#bbc2ce" />
</Style>

是否有可能在这里整合我的TextBox-Style ?如果没有，有人知道如何解决这个问题吗?

提前感谢!

创建边框样式与集成文本框

如果您只需要只读文本框，则可以使用DataTemplate和ContentPresenter，如下所示(为了演示，将my:RibbonTextBox替换为简单的TextBox)。如果需要读写，则必须提供某种允许读写的绑定方式。这可以通过ControlTemplate实现(同样在示例代码中)。

<Grid x:Name="grid1">
    <Grid.Resources>
        <Style TargetType="TextBox" x:Key="StandardRibbonTextBox">
            <!--Changed that one from HorizontalAlignment, in comparison to the question-->
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="IsReadOnly" Value="True" />
            <Setter Property="Background" Value="#FAFAFA" />
            <Setter Property="MinHeight" Value="0" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontFamily" Value="Arial" />
        </Style>
        <Style TargetType="Border" x:Key="borderStyle">
            <Setter Property="Background" Value="#bbc2ce" />
            <Setter Property="Margin" Value="1,1,5,0"/>
            <Setter Property="Padding" Value="5"/>
        </Style>
        <DataTemplate x:Key="borderedTextboxTemplate" DataType="{x:Type sys:String}">
            <Border Style="{StaticResource borderStyle}">
                <!--This is not going to work for two way binding (IsReadOnly="False" and Text="{Binding Mode=TwoWay}")-->
                <TextBox Style="{StaticResource StandardRibbonTextBox}" Text="{Binding Mode=OneWay}"/>
            </Border>
        </DataTemplate>
        <ControlTemplate x:Key="borderedTextboxControlTemplate" TargetType="TextBox">
            <Border Style="{StaticResource borderStyle}">
                <!--This is not going to work for two way binding (IsReadOnly="False" and Text="{Binding Mode=TwoWay}")-->
                <TextBox Style="{StaticResource StandardRibbonTextBox}" Text="{Binding Text,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}"/>
            </Border>
        </ControlTemplate>
        <Style x:Key="borderedTextboxControlStyle" TargetType="TextBox">
            <Setter Property="Template" Value="{StaticResource borderedTextboxControlTemplate}"/>
        </Style>
    </Grid.Resources>
    <StackPanel Margin="10">
        <!--Using Controls directly-->
        <Border Style="{StaticResource borderStyle}">
            <TextBox 
                 Text="{Binding Path=someViewModel.Item,Mode=OneWay}"
                 Style="{StaticResource StandardRibbonTextBox}"/>
        </Border>
        <Separator Margin="10"/>
        <!--Using DataTemplate-->
        <ContentPresenter
            Content="{Binding Path=someViewModel.Item,Mode=OneWay}"
            ContentTemplate="{StaticResource borderedTextboxTemplate}"/>
        <Separator Margin="10"/>
        <!--Using ControlTemplate via Style-->
        <TextBox Text="{Binding Path=someViewModel.Item,Mode=OneWay}" Style="{StaticResource borderedTextboxControlStyle}"/>
    </StackPanel>
</Grid>
相关文章：