relative panel / grid cannot align the horizontal alignment in item template selector

Question

I am working on a chat application. The chat page consists of a itemTemplateSelector which aligns the text to right end/left end according to the sender by checking a bool value. here is the code

<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;
    }
}

The itemtemplateselector is working for sure as the chat boxes are changing. I am unable to move the rightSide chatBox to the right end. Any suggestions?

Answer 1

Your ListView items are probably not stretching completely... Try adding this to ListView:

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

Answer 2

Just add TextAlignment="Right" to the TextBlock in your right template.