2
votes

I have a problem top aligning my stack panels/grids in my WPF window. Any ideas on what I'm doing wrong? It seems to be occurring when I try to top align content within a listbox, that displays items using a horizontally aligned stackpanel.

If I set the Height of the Grid that holds the ListBox with ItemsSource = {Binding BoardMarkerRows} to say 1400, alignment then starts working correctly (but I wanted this grid to have an auto height).

Screenshot showing alignment off: enter image description here

Here is my XAML

    <Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
        <StackPanel   VerticalAlignment="Top">

            <StackPanel Name="StackPanelOptions">
                <StackPanel  Orientation="Horizontal ">
                    <Button Content="Init" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Init"/>
                    <Button Content="Rotate" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
                    <Button Content ="Start" Command="{Binding BoardMarkerStartUpdatesCommand}"  Margin="2"/>
                    <Button Content ="Hide"  Name="ButtonHideHeader"  Margin="2" Click="ButtonHideHeader_Click"/>




                    <TextBlock Margin="2">
                        <TextBlock.Text>
                            <MultiBinding StringFormat="Status: {0}">
                                <Binding Path="BoardMarker.Status"  />
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                    <TextBlock Margin="2">
                        <TextBlock.Text>
                            <MultiBinding StringFormat="{}{0} Columns">
                                <Binding Path="BoardMarker.BoardMarkerColumns.Count "  />
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                    <TextBox Height="24" TextWrapping="Wrap" Text="{Binding BoardMarker.MaximumResultDate}" Width="271"/>
                    <CheckBox Content="Use Maximum Result Date" IsChecked="{Binding BoardMarker.UseMaximumResultDate}"/>
                    <Label Content="Number Rows"/>
                    <TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.BoardMarkerSettings.NumberRowsPerColumn}" Width="50"/>

                    <Label Content="Days Offset"/>
                    <TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.DaysOffset}" Width="50"/>


                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Label Content="Show All Runners"/>
                    <TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.ShowAll}" Width="300"/>


                </StackPanel>


            </StackPanel>


            <StackPanel Orientation="Vertical " VerticalAlignment="Top">
                <StackPanel >
                    <Viewbox VerticalAlignment="Top" Stretch="Uniform">

                        <ListBox ItemsSource ="{Binding BoardMarker.BoardMarkerColumns}"  Height="Auto" Width="Auto">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>

                            <ListBox.ItemTemplate>
                                <DataTemplate>

                                    <Grid VerticalAlignment="Top">
                                        <ListBox  Height="Auto" 
                                    ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">

                                            <ListBox.ItemTemplate>
                                                <DataTemplate>

                                                    <Grid >


                                                        <Grid Height="Auto" Background="LightGreen" Width="180"  Visibility="{Binding ConverterParameter=ArkleEvent 
                                                    , Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="75"/>
                                                                <ColumnDefinition Width="*"/>
                                                            </Grid.ColumnDefinitions>

                                                            <!--<TextBlock Text="{Binding RowType}" />-->
                                                            <TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
                                                            <TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
                                                        </Grid>





                                                        <Grid Background="LightBlue" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="180"
                                                              Visibility="{Binding ConverterParameter=ArkleMarket, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="110"/>
                                                                <ColumnDefinition Width="*"/>
                                                            </Grid.ColumnDefinitions>

                                                            <TextBlock Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold">
                                                                <TextBlock.Text>
                                                                    <MultiBinding StringFormat="{}{0:HH:mm} {1}">
                                                                        <Binding Path="ArkleMarket.ExpectedOffDate"  />
                                                                        <!--<Binding Path="RowType" />-->
                                                                        <Binding Path="ArkleMarket.RaceLength"  />
                                                                    </MultiBinding>
                                                                </TextBlock.Text>
                                                            </TextBlock>



                                                            <TextBlock Grid.Column="1" HorizontalAlignment="Right">
                                                                <TextBlock.Text>
                                                                    <MultiBinding StringFormat=" {0} Run {1} NR">
                                                                        <Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="StillRunning"  />
                                                                        <!--<Binding Path="RowType" />-->
                                                                        <Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="NR"  />
                                                                        <!--<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter=",ConverterParameter=NR />-->
                                                                    </MultiBinding>
                                                                </TextBlock.Text>
                                                            </TextBlock>


                                                        </Grid>


                                                        <TextBlock Text="---------------------------------"  Margin="0,-3,0,-3" Foreground="DodgerBlue"
                                                                     Visibility="{Binding ConverterParameter=ArkleSelectionStaticFirst,
                                                            Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}"/>

                                                        <Grid 
                                                            Visibility="{Binding ConverterParameter=ArkleSelectionStatic,
                                                            Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">

                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="Auto"/>
                                                                <ColumnDefinition Width="88"/>
                                                                <ColumnDefinition Width="35"/>
                                                                <ColumnDefinition Width="38"/>
                                                            </Grid.ColumnDefinitions>
                                                            <!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
                                                            <TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
                                                            <TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
                                                            <TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
                                                            <TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right"  TextDecorations="Strikethrough" />


                                                        </Grid>





                                                        <Grid Visibility="{Binding ConverterParameter=ArkleSelectionRotating, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">

                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="Auto"/>
                                                                <ColumnDefinition Width="88"/>
                                                                <ColumnDefinition Width="35"/>
                                                                <ColumnDefinition Width="38"/>
                                                            </Grid.ColumnDefinitions>


                                                            <!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
                                                            <TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
                                                            <TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
                                                            <TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
                                                            <TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right" />


                                                        </Grid>



                                                        <StackPanel  Visibility="{Binding ConverterParameter=TextRow, 
                                                            Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
                                                            <Label Content="{Binding Text}" />
                                                        </StackPanel>

                                                        <Grid Visibility="{Binding ConverterParameter=ArkleSelectionResult, 
                                                            Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">

                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="Auto"/>
                                                                <ColumnDefinition Width="88"/>
                                                                <ColumnDefinition Width="35"/>
                                                                <ColumnDefinition Width="38"/>
                                                            </Grid.ColumnDefinitions>
                                                            <!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
                                                            <TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
                                                            <TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
                                                            <TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
                                                            <TextBlock Grid.Column="3" Text="{Binding ArkleSelection.FinishingPosition,Converter={StaticResource ArkleSelectionFinishPositionToOrdinalDisplayText}}" Margin="2" Width="Auto"  HorizontalAlignment="Right" />


                                                        </Grid>

                                                        <StackPanel Visibility="{Binding ConverterParameter=ArkleSelectionNonRunner, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
                                                            <StackPanel Orientation="Horizontal">
                                                                <!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
                                                                <TextBlock Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
                                                                <TextBlock Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" Foreground="DarkGray"  />
                                                                <TextBlock Text="NR" Margin="2" Width="30" Foreground="DarkGray"  />
                                                                <TextBlock Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="30" Foreground="DarkGray" />

                                                            </StackPanel>

                                                        </StackPanel>

                                                    </Grid>


                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                        </ListBox>


                                    </Grid>


                                </DataTemplate>
                            </ListBox.ItemTemplate>

                        </ListBox>



                    </Viewbox>



                </StackPanel>
            </StackPanel>

        </StackPanel>
    </Viewbox>


</Grid>

2
Could you just provide the code for the control affected by the problem? Dumping everything isn't very helpful.Mike Eason
@Mike, I can't reproduce this with smaller XAML, could you show me a section you'd like to cut out. I'm not sure if it is the list box that the issue is with or other things within the code, e.g. stack panels or what.DermFrench
The best thing is to start from inside out. Start with your item, and work your way up the element tree and double check that the containers are aligned to the top.Mike Eason
I believe you could reproduce this with smaller XAML. And you should if you want a specific answer. That said, from what little I can see on the screenshot, it appears that your elements in the individual columns are being centered vertically. This suggests you've applied your "Top" alignment to the wrong element somewhere. I doubt you'll find someone willing to take the time to comprehend the large chunk of XAML you've included, so if you want a directed, specific answer you should improve the example.Peter Duniho
@Peter, I've tried setting top everywhere on it but am having no joy?DermFrench

2 Answers

2
votes

Add to the parent-listBox VerticalContentAlignment="Top"

Edit:
Little demo, with minimal changes from the source:

<Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
    <StackPanel   VerticalAlignment="Top">
        <StackPanel Orientation="Vertical " VerticalAlignment="Top">
            <StackPanel Height="338" >
                <Viewbox  VerticalAlignment="Top"  Stretch="Uniform">
                    <ListBox VerticalContentAlignment="Top"  Height="Auto" Width="Auto">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid VerticalAlignment="Top">
                                    <ListBox  Height="Auto"    Margin="5" Width="Auto" HorizontalAlignment="Stretch">
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <TextBlock Width="40" Height="40">Some Child</TextBlock>
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                        <ListBox.Items>
                                            <TextBlock />
                                            <TextBlock />
                                            <TextBlock />
                                        </ListBox.Items>
                                    </ListBox>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.Items>
                            <ListBoxItem>
                                <TextBlock />
                                <ListBoxItem.Style>
                                    <Style TargetType="ListBoxItem" >
                                        <Setter Property="Template" >
                                            <Setter.Value>
                                                <ControlTemplate>
                                                    <Border Margin="5" Background="Red" Height="150" Width="40" >
                                                        <TextBlock >Demo tol item</TextBlock>
                                                    </Border>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ListBoxItem.Style>
                            </ListBoxItem>
                            <TextBlock />
                            <TextBlock />
                            <TextBlock />
                        </ListBox.Items>
                    </ListBox>
                </Viewbox>
            </StackPanel>
        </StackPanel>
    </StackPanel>
</Viewbox>
1
votes

I dont have enough reputation to post this as a comment, so I'm posting as an answer.

I believe your problem may be in your ListBox.ItemTemplate:

                      ...
                      <ListBox.ItemTemplate>
                            <DataTemplate>

                                <Grid VerticalAlignment="Top">
                                    <ListBox  Height="Auto" 
                                ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">

                                        <ListBox.ItemTemplate>
                                            <DataTemplate>

                                                <Grid > // Missing vertical allignment in this grid


                                                    <Grid Height="Auto" Background="LightGreen" Width="180"  Visibility="{Binding ConverterParameter=ArkleEvent 
                                                , Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="75"/>
                                                            <ColumnDefinition Width="*"/>
                                                        </Grid.ColumnDefinitions>

                                                        <!--<TextBlock Text="{Binding RowType}" />-->
                                                        <TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
                                                        <TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
                                                    </Grid>
                                                    ...