WPF ListBox WPF XAML 内的顶部对齐
Posted
技术标签:
【中文标题】WPF ListBox WPF XAML 内的顶部对齐【英文标题】：Top Alignment inside WPF ListBox WPF XAML 【发布时间】：2015-03-10 13:28:27 【问题描述】：我在 WPF 窗口中顶部对齐堆栈面板/网格时遇到问题。 关于我做错了什么的任何想法？当我尝试在列表框中顶部对齐内容时似乎正在发生这种情况，该列表框使用水平对齐的堆栈面板显示项目。
如果我将包含 ItemsSource = Binding BoardMarkerRows 的 ListBox 的网格的高度设置为 1400，则对齐开始正常工作（但我希望此网格具有自动高度）。
显示对齐关闭的屏幕截图：
这是我的 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>
【问题讨论】：
能否提供受问题影响的控件的代码？倾倒所有东西不是很有帮助。 @Mike，我无法用更小的 XAML 重现这个，你能告诉我你想删掉的部分吗？我不确定是问题所在的列表框还是代码中的其他内容，例如堆叠面板或什么。 最好的事情是从内而外开始。从您的项目开始，沿着元素树向上移动，并仔细检查容器是否与顶部对齐。 我相信你可以用更小的 XAML 重现这个。如果你想要一个具体的答案，你应该这样做。也就是说，从我在屏幕截图上看到的一点点来看，您在各个列中的元素似乎是垂直居中的。这表明您在某处将“顶部”对齐应用到了错误的元素。我怀疑你会找到愿意花时间理解你所包含的大量 XAML 的人，所以如果你想要一个有针对性的、具体的答案，你应该改进这个例子。 @Peter，我试过在上面到处设置顶部，但没有任何乐趣？ 【参考方案1】：添加到父列表框VerticalContentAlignment="Top"
编辑： 小演示，对源代码的改动很小：
<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>
【讨论】：
@DermFrench 检查我的演示。您可以将ListBox.Items 部分替换为您的ItemSource（父列表框和子列表框）。对我来说它的工作。【参考方案2】：
我没有足够的声誉将此作为评论发布，所以我将发布作为答案。
我相信您的问题可能出在您的 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>
...
【讨论】：
以上是关于WPF ListBox WPF XAML 内的顶部对齐的主要内容，如果未能解决你的问题，请参考以下文章