Question

我是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>

有人可以帮助我吗？

Answer 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>

结果：

http://jsfiddle.net/3ekyetc0/

Answer 2

在不设置高度的情况下尝试StackPanel。然后它的内容需要它的高度和VerticalPaignment（StackPanel）才能生效。

StackPanel WP C＃

2 个答案: