相对面板/网格无法对齐项目模板选择器中的水平对齐方式

Posted 2021-04-15

我正在开发一个聊天应用程序。聊天页面包含一个itemTemplateSelector，它通过检查bool值，根据发件人将文本与右端/左端对齐。这是代码

<Page.Resources>
    <DataTemplate x:Key="ChatTemplateR">
        <Grid HorizontalAlignment="Stretch">
            <StackPanel HorizontalAlignment="Right" >
                <Border Background="{ThemeResource SystemControlBackgroundAccentBrush}" >
                    <TextBlock MinWidth="200" Text="{Binding conversation}" TextWrapping="Wrap"  Margin="5"/>
                </Border>
                <Path x:Name="DownRightTri"
              HorizontalAlignment="Right" 
              Margin="0,0,10,0"
              Fill="{ThemeResource SystemControlBackgroundAccentBrush}"
              Data="M0,0 H10 V10" />
            </StackPanel>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="ChatTemplateL">
        <Grid HorizontalAlignment="Stretch">
            <StackPanel HorizontalAlignment="Left">
                <Path x:Name="UpLeftTri"
              HorizontalAlignment="Left" 
              Margin="10,0,0,0" 
              Fill="{ThemeResource SystemControlBackgroundAccentBrush}"
              Data="M0,-5 V5 H10 " />
                <Border Background="{ThemeResource SystemControlBackgroundAccentBrush}" >
                    <TextBlock MinWidth="200" Text="{Binding conversation}" TextWrapping="Wrap" Margin="5"/>
                </Border>
            </StackPanel>
        </Grid>
    </DataTemplate>
    <local1:ChatTemplateSelector x:Key="ChatSelector" LeftTemplate="{StaticResource ChatTemplateL}" RightTemplate="{StaticResource ChatTemplateR}"/>

</Page.Resources>
<Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Button x:Name="backButton" 
                FontFamily="Segoe MDL2 Assets" 
                Content="&#xE0E2;"
                Foreground="{StaticResource SystemControlBackgroundAccentBrush}"
                FontSize="25"
                Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                Click="backButton_Click">
        <Button.Transitions>
            <TransitionCollection>
                <EdgeUIThemeTransition Edge="Left"/>
            </TransitionCollection>
        </Button.Transitions>
    </Button>
    <TextBlock Text="Chats" Grid.Column="1" Style="{ThemeResource tb1}" HorizontalAlignment="Center"/>

    <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ListView x:Name="lv" ItemsSource="{Binding BuddyChatOC}" ItemTemplateSelector="{StaticResource ChatSelector}">

        </ListView>
        <RelativePanel Grid.Row="1" Margin="5,10,5,10">
            <TextBox x:Name="sendtext" Margin="0,0,2,0" RelativePanel.AlignLeftWithPanel="True"  RelativePanel.LeftOf="sendtextbutton"/>
            <Button x:Name="sendtextbutton" Content="Send" Command="{Binding sendChatCommand}" RelativePanel.AlignRightWithPanel="True" >

            </Button>
        </RelativePanel>
    </Grid>
</Grid>

ItemTemplateSelecter：

public class ChatTemplateSelector : DataTemplateSelector
{
    public DataTemplate LeftTemplate { get; set; }
    public DataTemplate RightTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {

        BuddyChat2Datum chat = (BuddyChat2Datum)item;
        DataTemplate dt = chat.isLeft ? this.LeftTemplate : this.RightTemplate;
        return dt;
    }
}

itemtemplateselector正在工作，因为聊天框正在改变。我无法将rightSide chatBox移动到右端。有什么建议？

答案

您的ListView项目可能没有完全拉伸...尝试将此添加到ListView：

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

另一答案

只需将TextAlignment="Right"添加到右侧模板中的TextBlock即可。