StackPanel WP C#中元素的垂直对齐答案

【问题标题】：Vertical alignment for elements within a StackPanel WP C#StackPanel WP C#中元素的垂直对齐
【发布时间】：2015-12-08 11:25:46
【问题描述】：

我是 WindowsPhone 开发和 C# 的绝对初学者。实际上，我正在开发一个应用程序，我需要渲染一个水平图表栏。我正在尝试使用 LisBox 执行此操作，并在其中放置了 StackPanel。这工作正常，但垂直对齐是错误的。我希望 StackPanel 中的元素在底部保持对齐，就像图像一样。

我的代码：

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto"
                            ItemsSource="{Binding HistoricData.HistoricoList}">

                            <ListBox.ItemsPanel>

                                <ItemsPanelTemplate>

                                    <StackPanel Orientation="Horizontal" />

                                </ItemsPanelTemplate>

                            </ListBox.ItemsPanel>

                            <ListBox.ItemTemplate>

                                <DataTemplate>

                                    <StackPanel Orientation="Vertical"
                                                    Width="80"
                                                Height="450"
                                                Margin="12 0 0 0"
                                                VerticalAlignment="Bottom">

                                        <TextBox 
                                                Text="{Binding UnidadeConsumido}" 
                                                FontSize="18" 
                                                HorizontalAlignment="Center"
                                            Margin="0 0 0 0"/>

                                        <Rectangle 
                                                    Fill="{StaticResource MeuVivoMainContrastBrush}" 
                                                    Width="80"
                                                    Height="{Binding Consumo}" 
                                            VerticalAlignment="Bottom"/>

                                        <TextBox 
                                                    Text="{Binding Periodo}" 
                                                    MaxWidth="120" 
                                                    TextWrapping="Wrap" 
                                                    FontSize="21" 
                                                    HorizontalAlignment="Center" 
                                                    Foreground="#FF616161"
                                            VerticalAlignment="Bottom"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

有人可以帮助我吗？

【问题讨论】：

VerticalAlignment 的子级将在垂直 StackPanel 中被忽略
感谢 dkozl，我尝试过使用 DockPanel，但它不再受支持。
您可以尝试将ListBoxItem 的VerticalContentAlignment 设置为ItemContainerStylke 的底部，但您还需要禁用VerticalScrollbarVisibility

标签： c# wpf xaml windows-phone stackpanel

【解决方案1】：

为您的列表框创建一个Style，并将VerticalContentAlignment 设置为Bottom。然后将您的Style 应用到您的ListBox，如下所示。

XAML：

<Window.Resources>
    <SolidColorBrush x:Key="ListBox.Static.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="ListBox.Static.Border" Color="#FFABADB3"/>
    <SolidColorBrush x:Key="ListBox.Disabled.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="ListBox.Disabled.Border" Color="#FFD9D9D9"/>
        <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="{StaticResource ListBox.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Border}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsGrouping" Value="true"/>
                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemsSource="{Binding Mode=OneWay}" Style="{DynamicResource ListBoxStyle1}">
        <ListBox.DataContext>
            <local:MyDataCollection/>
        </ListBox.DataContext>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding UnidadeConsumido}"></TextBlock>
                    <Rectangle Fill="BlueViolet" Height="{Binding Consumo}"></Rectangle>
                    <TextBlock Text="{Binding Periodo}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

结果：

【讨论】：

【解决方案2】：

在不设置高度的情况下尝试 StackPanel。然后它将与内容需要的一样高，并且（StackPanel的）VerticalAlignment可以生效。

【讨论】：