Loading data distorts form design

Question

I have a window in wpf that looks like this with no code-behind: Image with no code-behind

Now that my form looks like I want it to, I use the following to get data from my SQL Server database and load it into the form:

Private Sub winVehicleExpenses_Loaded(sender As Object, e As RoutedEventArgs) Handles winVehicleExpenses.Loaded
    taVehicleExpenses = New PIMDataSetTableAdapters.taVehicleExpenses
    taVehicleExpenses.Fill(dsPIM.VehicleExpenses)   'Load all the Expense data into the PIM dataset
    Dim dvTypes As DataView = New DataView(dsPIM.Tables("StandardEntries"), "CategoryID = 13", "Entry", DataViewRowState.CurrentRows)   'CategoryID = 13 are the Vehicle Expense Types
    With cboTypes
        .ItemsSource = dvTypes
        .SelectedIndex = 0  'Move to the first entry
    End With
End Sub

Now when I run the application, here is what the form looks like: Window when loading data

Note the gap between the "Notes" label and the notes textboxes that was not there before the data were loaded.

How can the simple process of loading data into a listbox and some textboxes change the form layout?

ADDED: Here's the XAML

<Window
x:Class="VehicleExpenses"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="VehicleExpense"
xmlns:local="clr-namespace:PIM"
x:Name="winVehicleExpenses"
Height="490"
Width="440"
ShowInTaskbar="False"
Background="#FFE8FFFD"
IsTabStop="False">
<Window.Resources>
    <local:DisplayDateFormatter x:Key="FormatDisplayDate" />
    <local:DisplayCurrencyFormatter x:Key="FormatCurrency" />
    <local:DisplayFixedFormatter x:Key="FormatSingle" />
    <Style x:Key="ItemHeaders" TargetType="Label">
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="Grid.Row" Value="1" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Bottom" />
    </Style>
    <Style x:Key="ItemLabels" TargetType="Label">
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="Height" Value="26" />
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Width" Value="80" />
        <Setter Property="Margin" Value="0,5,0,0" />
    </Style>
    <Style x:Key="PreviousTextBoxes" TargetType="TextBox">
        <Setter Property="Height" Value="26" />
        <Setter Property="Margin" Value="0,5,0,0" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="Width" Value="80" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="Cornsilk" />
    </Style>
    <Style TargetType="Button">
        <Setter Property="Height" Value="26" />
        <Setter Property="Width" Value="60" />
        <Setter Property="Margin" Value="60,0,0,0" />
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="30" />
        <RowDefinition Height="225" />
        <RowDefinition Height="100" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="90"/>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <StackPanel
        Grid.Column="0"
        Grid.Row="0"
        Grid.ColumnSpan="3"
        Orientation="Horizontal"
        HorizontalAlignment="Center">
        <Label
            Height="26"
            FontWeight="Bold"
            Content="Expense Type:" />
        <ComboBox
            Name="cboTypes"
            Height="26"
            Width="120"
            FontSize="13"
            DisplayMemberPath="Entry"
            SelectedValuePath="EntryID"
            Background="White" />
    </StackPanel>
    <Label
        Grid.Column="0"
        Content="Item"
        Width="80"
        Style="{StaticResource ItemHeaders}" />
    <StackPanel
        Grid.Column="0"
        Grid.Row="2"
        Height="220"
        VerticalAlignment="Top">
        <Label
            Name="lblChargeDate"
            Content="Charge Date:"
            Style="{StaticResource ItemLabels}" />
        <Label
            Name="lblMileage"
            Content="Mileage:"
            Style="{StaticResource ItemLabels}" />
        <Label
            Name="lblGallons"
            Content="Gallons:"
            Style="{StaticResource ItemLabels}" />
        <Label
            Name="lblCharge"
            Content="Charge:"
            Style="{StaticResource ItemLabels}" />
        <Label
            Name="lblStartDate"
            Content="Start Date:"
            Style="{StaticResource ItemLabels}" />
        <Label
            Name="lblEndDate"
            Content="End Date:"
            Style="{StaticResource ItemLabels}" />
    </StackPanel>
    <Label
        Content="Previous"
        Grid.Column="1"
        Width="93" 
        Style="{StaticResource ItemHeaders}" />
    <Label
        Content="Current"
        Grid.Column="2"
        Width="93"
        Style="{StaticResource ItemHeaders}" />
    <StackPanel
        Name="pnlPrevious"
        Grid.Column="1"
        Grid.Row="2"
        Height="220"
        VerticalAlignment="Top">
        <TextBox
            Text="{Binding Path=ChargeDate, Converter={StaticResource FormatDisplayDate}}"
            Style="{StaticResource PreviousTextBoxes}"
            Focusable="False" />
        <TextBox
            Name="txtPreviousMileage"
            Text="{Binding Path=Mileage}"
            Style="{StaticResource PreviousTextBoxes}"
            Focusable="False" />
        <TextBox
            Name="txtPreviousGallons"
            Text="{Binding Path=Gallons, Converter={StaticResource FormatSingle}, ConverterParameter=3}"
            Style="{StaticResource PreviousTextBoxes}"
            Focusable="False" />
        <TextBox
            Text="{Binding Path=Charge, Converter={StaticResource FormatCurrency}}"
            Style="{StaticResource PreviousTextBoxes}"
            Focusable="False" />
        <TextBox
            Name="txtPreviousStartDate"
            Text="{Binding Path=StartDate, Converter={StaticResource FormatDisplayDate}}"
           Style="{StaticResource PreviousTextBoxes}"
            Focusable="False" />
        <TextBox
            Name="txtPreviousEndDate"
            Text="{Binding Path=EndDate, Converter={StaticResource FormatDisplayDate}}"
            Style="{StaticResource PreviousTextBoxes}"
            Focusable="False" />
        <Label
            Name="lblNotes"
            Content="Notes:"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Margin="0,0,30,0"
            Style="{StaticResource ItemLabels}" />
    </StackPanel>
    <StackPanel
        Grid.Column="2"
        Grid.Row="2"
        Height="220"
        VerticalAlignment="Top">
        <DatePicker
            Name="dprCurrentChargeDate"
            HorizontalAlignment="Left"
            Height="23"
            VerticalAlignment="Top"
            Width="120" />
        <TextBox
            Name="txtCurrentMileage"
            HorizontalAlignment="Left"
            Height="23"
            VerticalAlignment="Top"
            Width="120" />
        <TextBox
            Name="txtCurrentsGallons"
            HorizontalAlignment="Left"
            Height="23"
            VerticalAlignment="Top"
            Width="120" />
        <TextBox
            Name="txtCurrentCharge"
            HorizontalAlignment="Left"
            Height="23"
            VerticalAlignment="Top"
            Width="120" />
        <DatePicker
            Name="dprCurrentStartDate"
            HorizontalAlignment="Left"
            Height="23"
            VerticalAlignment="Top"
            Width="120" />
        <DatePicker
            Name="dprCurrentEndDate"
            HorizontalAlignment="Left"
            Height="23"
            VerticalAlignment="Top"
            Width="120" />
    </StackPanel>
    <StackPanel
        Grid.Column="0"
        Grid.ColumnSpan="3"
        Grid.Row="3"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"
        Orientation="Horizontal">
        <TextBox
            Name="txtPreviousNotes"
            VerticalAlignment="Stretch"
            Width="175"
            Text="{Binding Notes}"
            Background="Cornsilk"
            Focusable="False"
            Margin="10,0,0,0"/>
        <TextBox
            Name="txtCurrentNotes"
            VerticalAlignment="Stretch"
            Width="175"
            Margin="55,0,0,0" />
    </StackPanel>
    <StackPanel
        Grid.Column="0"
        Grid.Row="4"
        Grid.ColumnSpan="3"
        Orientation="Horizontal">
        <Button
            Name="btnCancel"
            Content="Cancel"
            IsTabStop="False" />
        <Button
            Name="btnClose"
            Content="Close"
            IsTabStop="False" />
        <Button
            Name="btnView"
            Content="View"
            IsTabStop="False" />
    </StackPanel>
</Grid>

The "offending" element is the combo box. if I do not set the combobox selectedindex = 0 then the problem does not appear when loading the form. HOWEVER, now when the user selects an item from the combobox, it does cause the form to change to the second image above. — SezMe, Mar 13 '15 at 06:29
There's some simple XAML between the double quotes in the above edited post but even that won't show up. — SezMe, Mar 13 '15 at 07:00

B.K. · Accepted Answer · 2015-03-14T16:29:44.840

2

Well, after you posted your code and explained further what you're doing, it's pretty clear what's going on. Label lblNotes is in the pnlPrevious StackPanel, which has its VerticalAlignment property set to Top. It makes no difference that you set the VerticalAlignment in the Label to Bottom, since it's a relative property, which makes little difference in a StackPanel. So, when you collapse some of your controls, the content in the pnlPrevious StackPanel rearranges and occupies only as much space as it needs.

The only way to get content to align to the bottom of the StackPanel, without inserting other panels in it, is to align the StackPanel itself to the Bottom. However, that would be a poor decision for your layout.

To save yourself headache and frustration, move lblNotes out of pnlPrevious and into its own row, just above the StackPanel containing notes textboxes.

edited Mar 14 '15 at 16:29

answered Mar 12 '15 at 07:09

B.K.

9,982
10
73
105

1

The missing start date and End date are a nice hint. :-) – Alain Mar 12 '15 at 07:26
@Alain No the missing dates are not a hint at all. Those boxes are missing because I "collapse" them for certain selections in the top combo box. – SezMe Mar 13 '15 at 07:02
1

@SezMe So, when you "collapse" them, your layout, depending on how you construct it, adjusts. "Notes" gets moved up, probably because it's vertical alignment is set to `Top`. We won't know unless you provide XAML. – B.K. Mar 13 '15 at 07:21
@B.K. See the XAML above. – SezMe Mar 14 '15 at 10:21
@B.K. I had stared at this code for so long looking elsewhere that I completely missed that lblNotes was in pnlPrevious. OF COURSE, that was bad design. The cleanest solution was to add a row to the grid as you suggested and that fixed the problem. I'm not sure that the issue was the collapse actions but you may be right. I'll move ahead now but will do some additional checking later to make sure I understand the form's behavior. – SezMe Mar 14 '15 at 23:00

score 0 · Answer 2 · answered Mar 12 '15 at 07:58

0

There a many ways to create the LayOut in XAML. Without the actual XAML it is a guessing exercition on how the Lay Out changed.

answered Mar 12 '15 at 07:58

John Van de Pol

5
3

I realize that. I first did not post the XAML because it is so long. But with the additional information I've provided, the next step is to post it. I'll try to do that by adding it to my original post. – SezMe Mar 13 '15 at 06:30

Loading data distorts form design

2 Answers2