对话窗口 xaml windows phone 8.1

Question

我正在尝试创建一个类似于 messenger 的聊天窗口，现在我已经设法让聊天消息正常工作，但我不知道如何让文本框出现在末尾以便输入与我在 texblox 上用于对话的路径相同。

<Page
        x:Class="Curo.ChatMessage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Curo"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:helpers="using:Curo.Helpers"
        mc:Ignorable="d" Background="#FFFDFDFD" Foreground="#FF040404">

        <Page.Resources>
            <DataTemplate x:Name="ToTemplate">
                <Grid>
                    <Grid x:Name="ToBubble" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Top">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="20"/>
                        </Grid.RowDefinitions>
                        <Grid Margin="0" Background="{StaticResource PhoneAccentBrush}" Grid.Row="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>

                            <TextBlock Foreground="White" Text="{Binding TextMessage}" x:Name="MainText" TextWrapping="Wrap" Grid.Row="0" Width="300" FontSize="21.333" Padding="10,5,10,5">

                            </TextBlock>
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock Opacity="0.8" Foreground="White" Text="{Binding Time}" x:Name="timeText" Margin="0" TextWrapping="Wrap" Grid.Row="0" Padding="10" Grid.Column="0"/>
                                <TextBlock Opacity="0.8" Foreground="White" Text="{Binding Status}" x:Name="status" Margin="0" TextWrapping="Wrap" Grid.Row="0" Padding="10" Grid.Column="1" HorizontalAlignment="Right"/>
                            </Grid>

                        </Grid>
                        <Path Grid.Row="1"  Data="M404,136 L404,149.5 L387.5,134.5 z" Fill="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Right" Height="20" Stretch="Fill" UseLayoutRounding="False" Width="20" Margin="0,-5,10,0"/>
                    </Grid>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Name="FromTemplate">
                <Grid x:Name="FromBubble" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Path Grid.Row="0"  Data="M404,136 L404,149.5 L387.5,134.5 z" Fill="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Left" Height="20" Stretch="Fill" UseLayoutRounding="False" Width="20" Margin="10,2,10,0" RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <CompositeTransform Rotation="-179.206"/>
                        </Path.RenderTransform>
                    </Path>
                    <Grid Margin="0" Background="{StaticResource PhoneAccentBrush}" Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>

                        <TextBlock Foreground="White" Text="{Binding TextMessage}" x:Name="MainText2" TextWrapping="Wrap" Grid.Row="0" Width="300" FontSize="21.333" Padding="10,5,10,5">

                        </TextBlock>
                        <Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <TextBlock Opacity="0.8" Foreground="White" Text="{Binding Time}" x:Name="timeText2" Margin="0" TextWrapping="Wrap" Grid.Row="0" Padding="10" Grid.Column="0"/>
                        </Grid>

                    </Grid>

                </Grid>
            </DataTemplate>
            <helpers:ChatBubbleSelector x:Key="ChatBubbleTemplateSelector" toBubble="{StaticResource ToTemplate}" fromBubble="{StaticResource FromTemplate}"></helpers:ChatBubbleSelector>
            <TextBox  x:Name="test" Text="test"/>
        </Page.Resources>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="My Chat Window" Margin="10,10,2,0.667" FontSize="30"></TextBlock>
            <ListBox Height="450" Background="White" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" x:Name="myChat" ItemTemplateSelector="{StaticResource ChatBubbleTemplateSelector}" BorderBrush="White" Foreground="Black">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                        <Setter Property="IsHitTestVisible" Value="False"></Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Grid>
        <Page.BottomAppBar>
            <CommandBar>
                <AppBarButton Icon="Add" Label="me bubble" x:Name="meClick"  ></AppBarButton>
                <AppBarButton Icon="Add" Label="you bubble" x:Name="youClick"  ></AppBarButton>
            </CommandBar>
        </Page.BottomAppBar>

这是我的聊天窗口

我希望我的看起来像标准的，我不想抄袭 facebook 这只是一个学习练习，以更好地理解 xaml。

我尝试只在末尾添加文本框，但显然由于某种原因它没有显示在图片中。我应该为此使用混合吗？

编辑

我的第二次尝试

  <Grid Margin="0" Background="{StaticResource PhoneAccentBrush}" Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>

                        <TextBlock Foreground="White" Text="{Binding TextMessage}" x:Name="MainText2" TextWrapping="Wrap" Grid.Row="0" Width="300" FontSize="21.333" Padding="10,5,10,5">

                        </TextBlock>


                        <TextBox  x:Name="test" Text="test" TextWrapping="Wrap" Grid.Row="0" Width="300" FontSize="21.333" Padding="10,5,10,5"></TextBox>

如您所见，将其置于消息气泡上方。

Answer 1

转到包含对齐消息的列表视图的属性，请参阅 VerticalContentAlignment 将其设置为底部。

或添加以下代码：

<ListView x:Name="chatView" RenderTransformOrigin="0.5,0.5" Width="370" SelectionMode="None" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Center" Margin="15,46,15,52" Loaded="chatView_Loaded" Height="542" VerticalContentAlignment="Bottom">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="0,10,0,10" HorizontalAlignment="Stretch" Width="370">
                <StackPanel  HorizontalAlignment="{Binding align}" Width="250" Background="#FF007ACC">
                    <TextBlock x:Name="msg" TextWrapping="Wrap" Text="{Binding msg}" FontSize="22.667">
                    </TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 2

您需要将其放在列表之外。你的 xml 应该是这样的：

<Grid>
  <ListView Margin="0 0 0 80"/> -- messages, with a bottom border so it doesn't overlap the textbox
  <TextBox VerticalAlignment="Bottom" Height="80"/> -- here you type your message
</Grid>