用户控制样式奇怪的行为

Question

这里发生了这么奇怪的事情。我正在使用 wpf xaml，我创建了一个用户控件，在右上角输入了一个带有图像的文本框。

这里是控件的xaml代码：

<UserControl x:Class="Stirnradprogramm.Classes.Controls.TextBoxWithImage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Stirnradprogramm.Classes.Controls"
         x:Name="parent">
<Grid DataContext="{Binding ElementName=parent}" Margin="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="15"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="15"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <TextBox  Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" KeyDown="TextBox_KeyDown" ></TextBox>
    <StackPanel Grid.Column="1" Margin="0,3,3,0">
        <Image Grid.Column="1" Margin="0,2,0,0" Grid.Row="0" MouseDown="Image_MouseDown" >
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=State}" Value="true">
                            <Setter Property="Source" Value="{Binding LockedImgPath}"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=State}" Value="false">
                            <Setter Property="Source" Value="{Binding UnlockedImgPath}"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </StackPanel>
</Grid>

现在我在我的 Main 中使用它 Window:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"></RowDefinition>
    </Grid.RowDefinitions>
    <tbwi:TextBoxWithImage Style="{StaticResource TextBoxWithImageStyle}" Height="27" Margin="3" State="{Binding lockPressed}" Grid.Column="0" Grid.Row="1" />
    <TextBox Style="{StaticResource TextBoxStyle}" Grid.Column="1" Grid.Row="1"></TextBox>
</Grid>

如您所见，我在这里使用了两种不同的样式：

<Style TargetType="tbwi:TextBoxWithImage" x:Key="TextBoxWithImageStyle">
    <Setter Property="Height" Value="27"></Setter>
    <Setter Property="Margin" Value="3"></Setter>
    <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
</Style>
<Style TargetType="TextBox" x:Key="TextBoxStyle">
    <Setter Property="Height" Value="27"></Setter>
    <Setter Property="Margin" Value="3"></Setter>
    <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
</Style>

样式看似相同，但视觉效果不同：

更有趣的是，当我从我的用户控件中删除样式并手动编写边距和高度属性时，结果与预期的一样，大小相同：

<tbwi:TextBoxWithImage  Height="27" Margin="3" State="{Binding lockPressed}" Grid.Column="0" Grid.Row="1" />

有人遇到过这种行为吗？如果有任何帮助，我将不胜感激。

Answer 1

删除 VerticalContentAlignment setter 或在样式中将其值设置为 Stretch:

<Style TargetType="tbwi:TextBoxWithImage" x:Key="TextBoxWithImageStyle">
    <Setter Property="Height" Value="27"></Setter>
    <Setter Property="Margin" Value="3"></Setter>
    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
</Style>

...然后将UserControl中TextBox的VerticalContentAlignment设置为居中：

<TextBox  Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalContentAlignment="Center"></TextBox>

不同之处在于，如果您将 UserControl 的 VerticalContentAlignment 属性设置为 Stretch 以外的其他内容，则 TextBox 会拉伸以填充可用空间 space 而 UserControl 中的 Grid 则不会。 =12=]

用户控制样式奇怪的行为

Style at User Control strange behavior

c#

wpf

xaml

user-controls