[英]Conversation window xaml windows phone 8.1
我暂时试图创建一个聊天窗口来向mesanger聊天,现在我设法使聊天消息往返,但是我迷失了如何使文本框出现在最后以相同的路径输入我已经在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>
如您所见,它位于消息气泡上方。
您需要将其放在列表之外。 您的xaml应该是这样的:
<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>
转到包含对齐消息的列表视图的属性,请参见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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.