相關面板/網格無法對齊項目模板選擇中的水平對齊

Question

我正在開發一個聊天應用程序。聊天頁面由一個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工作肯定是聊天框改變。我無法將右側的chatBox移到最後。有什麼建議麼？

Answer 1

你的ListView項目可能不是完全伸展......嘗試添加這ListView控件：

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

Answer 2

只需在您的正確模板中將TextAlignment="Right"添加到TextBlock即可。