none
When I click on a TextBox the text moves a little bit for Vertical Alignment

    Question

  • I have a Grid of text boxes defined in the XAML using the following code:

            <Border Grid.Row="2" Grid.Column="11" Style="{StaticResource BorderStyleContent}" >
                <TextBox Text="-15.11" Style="{StaticResource EditableTextBox}"/>
            </Border>

    The styles are defined below:

            <Style x:Key="BorderStyleContent" TargetType="Border">
                <Setter Property="BorderBrush" Value="Black"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Padding" Value="2"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
            </Style>

            <Style x:Key="EditableTextBox" TargetType="TextBox">
                <Setter Property="Background" Value="White"/>
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <EventSetter Event="LostFocus" Handler="TextBoxLostFocus"/>
            </Style>

    When I click on these text boxes (i.e. when they are in Focus) the context vertically aligns, i.e. the content vertically centers. You can see the behavior in this short video: http://drop.io/textAlignmentIssue

    This behavior happens only once (clicking on the text box for the first time). Clicking on the text box after it has lost focus does cause this issue. I can't seem to figure out why does the text centers only when the user clicks on it.

    Your help will be appreciated in figuring out this issue.

    Thanks,

    Tuesday, September 7, 2010 2:58 PM

All replies

  • Ulahoti,

    I can’t reproduce the issue on my side. Here is the code I’ve tried:

    <Window x:Class="TextAlignmentIssue.Window1"

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            Title="Window1" Height="100" Width="600">

        <Window.Resources>

            <Style x:Key="BorderStyleContent" TargetType="Border">

                <Setter Property="BorderBrush" Value="Black"/>

                <Setter Property="BorderThickness" Value="1"/>

                <Setter Property="Padding" Value="2"/>

                <Setter Property="SnapsToDevicePixels" Value="True"/>

            </Style>

            <Style x:Key="EditableTextBox" TargetType="TextBox">

                <Setter Property="Background" Value="White"/>

                <Setter Property="Foreground" Value="Black"/>

                <Setter Property="HorizontalAlignment" Value="Stretch"/>

                <Setter Property="VerticalAlignment" Value="Center"/>

                <Setter Property="TextAlignment" Value="Center" />

                <Setter Property="VerticalContentAlignment" Value="Center"/>

            </Style>

        </Window.Resources>

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition />

                <RowDefinition />

            </Grid.RowDefinitions>

            <Border Grid.Row="2" Grid.Column="11"

                    Style="{StaticResource BorderStyleContent}" >

                <TextBox Text="-15.11" Style="{StaticResource EditableTextBox}"/>

            </Border>

        </Grid>

    </Window>

     

    The only thing I removed from you style was the EventSetter because you didn’t prove code for the handler. But since this only happens on when focus is lost I don’t think it’s relevant. If you want, try the code above and see if you do have the same problem.

    In general however the effects you described (my company’s firewall prevent me from watching your video) usually occur when additional styles are loaded in response to some event, such as a textbox getting focus. For example:

    Application.Current.Resources.MergedDictionaries.Add(
        (ResourceDictionary)Application.LoadComponent(
            new Uri("SomeFile.xaml", UriKind.Relative));

    Code like this can sometime reside in a static constructor of some type that was not touched before the execution of an event handler. I suggest you look for any code that dynamically loads of alters any resource dictionaries in your entire solution and its dependencies. If you find such code try to comment it out and see if it solves your problem.

     - Levi

     

    Tuesday, September 7, 2010 5:46 PM
  • Thanks for spending time to look into my problem.

    I couldn't find anything in the code that is loading the resources dynamically. Effectively it appears that when I click in the TextBox, it is performing VerticalContentAlignment to Center. The text moves about 2-3 pixels up.

    When you can please look at the video, it is just a 10 sec video. I will take a look at my code again to figure out what could be the possible issue.

     

    Tuesday, September 7, 2010 8:18 PM
  • I played a little bit with the code and it appears that the 'VerticalContentAlignment' doesn't take effect in the design time. If I remove the Border, and have the TextBox by itself then the property 'VerticalContentAlignment' takes effect. While running the application, when I click in the TextBox the 'VerticalContentAlignment' alignment is getting applied.

    It is probably happening because of something else in the code. Obviously I can't figure it out. However does this give you some idea on what to look for?

    Tuesday, September 7, 2010 8:32 PM
  • I played with alingment and vertical size a little, still can't reproduce your problem. Have you tried the code I posted, does it have the same problem? - Levi
    Wednesday, September 8, 2010 2:26 PM
  • Hi Ulahoti,

    I watched your video and I have been playing around with Levi's sample for a while, but I cannot reproduce this issue either.

    Would you please provide us a complete sample that can reproduce this issue? It will help a lot.

    You can also try Levi's sample on your side and see whether the issue exists.

    Best regards,

    Min


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
    Thursday, September 9, 2010 6:24 AM
    Moderator
  • Hi,

    Also I cannot reproduced the issue.

    So what is inside the LostFocus()?  Can you share some? If there are no more alignment modifications inside;

    then it should be okay.  And your using VS2008 SP1 right?

     

    Regards,

    gioVhan


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Thursday, September 9, 2010 7:00 AM