CODEWITHSUNDEEP
c#wpfxamluser-controls
MCv
MCv

Reputation: 118

Style at User Control strange behavior

Such a strange thing happens here. I'm using wpf xaml, and I created a User Control, kind a textbox with a image in a right upper corner.

Here is the xaml code of the control:

<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>

Now I'm using it in my 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>

As you could see, I'm using here two different Styles:

<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>

Styles seems to be the same, but visual result is different: enter image description here

And more interesting, when I throw away style from my User Control and write Margin and Height property manually, result is as expecting, the same size:

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

enter image description here

Did anyone faced with this behavior? I would appreciate any help.

Upvotes: 0

Views: 36

Answers (1)

mm8
mm8

Reputation: 169220

Remove the VerticalContentAlignment setter or set the value of it to Stretch in the Style:

<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>

...and then set the VerticalContentAlignment of the TextBox in the UserControl to Center:

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

The difference is that the TextBox stretches to fill the available space whereas the Grid in the UserControl doesn't if you set the VerticalContentAlignment property of the UserControl to something else than Stretch.

Upvotes: 1

Related Questions