我想创建一个ListView,它具有右对齐的项目以及左对齐的项目。到目前为止,在我使用DataTemplates和ItemContainerStyles的所有尝试中,我都无法实现这一点。左对齐工作正常,因为这是默认值,但我无法弄清楚如何使一些项目右对齐。例如,这类似于聊天/会话类型视图,如Windows Phone Messaging应用程序。
我目前的XAML看起来像这样:
<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>
<DataTemplate x:Key="SentMessageTemplate">
<StackPanel Padding="10" Margin="5" Background="Teal" HorizontalAlignment="Right" Width="Auto">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White"/>
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ReceivedMessageTemplate">
<StackPanel Padding="10" Margin="5" Background="LightGray">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" TextAlignment="Right" FontStyle="Italic" FontSize="12"/>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="SentMessageStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<Style TargetType="ListViewItem" x:Key="ReceivedMessageStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
SentMessageTemplate="{StaticResource SentMessageTemplate}"
ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
</local:MessageListTemplateSelector>
<local:MessageListContainerStyleSelector x:Key="MessageListContainerStyleSelector"
SentMessageStyle="{StaticResource SentMessageStyle}"
ReceivedMessageStyle="{StaticResource ReceivedMessageStyle}">
</local:MessageListContainerStyleSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemContainerStyleSelector="{StaticResource MessageListContainerStyleSelector}" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False"/>
</Grid>
我可以更改哪些内容可以使“已发送”消息正确对齐?目前它们出现了我想要的蓝绿色背景,但它们仍然是左对齐而不是右对齐。我对XAML有点新意,如果我离开这里,请原谅我。
更新:解决方案
网格是关键,我最终必须使用多个网格来实现正确的右对齐,并结合ItemContainerStyle
设置HorizontalContentAlignment
。
<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>
<DataTemplate x:Key="SentMessageTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Padding="10" Background="Teal">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White" />
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="ReceivedMessageTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Padding="10" Background="LightGray">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" />
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
<local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
SentMessageTemplate="{StaticResource SentMessageTemplate}"
ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
</local:MessageListTemplateSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
答案 0 :(得分:1)
问题在于您的DataTemplates,而不是样式等。您必须在DataTemplate中使用Grid而不是Stackpanel来实现这一目标。
Stackpanels不会延伸到父母。他们只会获得其中所有控件的宽度/高度。尝试类似
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
答案 1 :(得分:0)
您应该使用HorizontalAlignment属性来定义父元素内元素的位置。<Grid x:Name="simpleGrid" height = 50 width = 100 HorizontalAlignment="right" />