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>

现在我在主窗口中使用它：

<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设置器或在Style中将其值设置为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设置为Center：

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

区别在于TextBox伸展以填充可用空间，而如果将UserControl的VerticalContentAlignment属性设置为Stretch以外的其他内容，则UserControl中的Grid不会。

用户控制风格奇怪的行为

1 个答案: