C# 用户控制奇怪行为时的样式

C# 用户控制奇怪行为时的样式,c#,wpf,xaml,user-controls,C#,Wpf,Xaml,User Controls,这种奇怪的事情发生在这里。我使用的是wpf xaml,我创建了一个用户控件,类似于一个文本框,右上角有一个图像 以下是控件的xaml代码: <UserControl x:Class="Stirnradprogramm.Classes.Controls.TextBoxWithImage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://sch

这种奇怪的事情发生在这里。我使用的是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" />


有人面对过这种行为吗?如果有任何帮助,我将不胜感激。

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

<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中文本框的VerticalContentAlignment设置为居中:

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


不同之处在于,如果您将UserControl的VerticalContentAlignment属性设置为Stretch以外的内容,则文本框会拉伸以填充可用空间,而UserControl中的网格则不会。是的,这就是我所需要的