StackPanel WP C# 中元素的垂直对齐
Vertical alignment for elements within a StackPanel WP C#
我绝对是 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>
有人可以帮助我吗?
尝试不设置高度的 StackPanel。然后它将和它的内容需要的一样高,并且(StackPanel 的)VerticalAlignment 可以生效。
为您的列表框创建一个 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>
结果:
我绝对是 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>
有人可以帮助我吗?
尝试不设置高度的 StackPanel。然后它将和它的内容需要的一样高,并且(StackPanel 的)VerticalAlignment 可以生效。
为您的列表框创建一个 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>
结果: