MessageTextPage.xaml

<Page
    x:Class="RingClientUWP.Views.MessageTextPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RingClientUWP"
    xmlns:views="using:RingClientUWP.Views"
    xmlns:ctl="using:RingClientUWP.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- bubble -->
        <views:BubbleBackground x:Key="_bubbleBackground_" />
        <views:BubbleHorizontalAlignement x:Key="_bubbleHorizontalAlignement_" />
        <DataTemplate x:Key="ConversationMessageTemplate"
                      x:DataType="local:ConversationMessage">
            <Grid Margin="0"
                  HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="8*" />
                </Grid.ColumnDefinitions>
                <Border  Background="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}"
                         CornerRadius="10"
                         Grid.Column="1"
                         Width="auto"
                         Height="auto"
                         Padding="5"
                         Margin="5" >
                    <ContentPresenter>
                        <!--Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."-->
                        <TextBlock x:Name="_msgContent_"
                                   TextWrapping="Wrap"
                                   Text="{x:Bind Payload}"
                                   Foreground="White"/>
                    </ContentPresenter>
                </Border>
            </Grid>
        </DataTemplate>
        <!-- barre d'envoi de message -->
        <Style TargetType="TextBox">
            <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
            <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="white" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="Padding" Value="4,4"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Border x:Name="BackgroundElement"
                                    Grid.Row="1"
                                    Background="{TemplateBinding Background}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Opacity="1"
                                    Grid.ColumnSpan="2"
                                    BorderBrush="LightBlue"
                                    BorderThickness="1"
                                    Grid.RowSpan="1"/>
                            <ScrollViewer x:Name="ContentElement"
                                          Grid.Row="1"
                                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                          IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                          Margin="{TemplateBinding BorderThickness}"
                                          Padding="{TemplateBinding Padding}"
                                          IsTabStop="False"
                                          AutomationProperties.AccessibilityView="Raw"
                                          ZoomMode="Disabled" />

                            <Button x:Name="_sendBtn_"
                                    Background="Transparent"
                                    Grid.Row="1"
                                    FontFamily="Segoe MDL2 Assets"
                                    Foreground="LightBlue"
                                    Content="&#xE122;"
                                    IsTabStop="False"
                                    Grid.Column="1"
                                    Click="_sendBtn__Click"
                                    Visibility="Visible"
                                    MinWidth="34"
                                    FontSize="20"
                                    VerticalAlignment="Stretch"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="#FFF2F2F2">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0"
                    Background="White"
                    Height="70"
                    Orientation="Horizontal"
                    Padding="10,10">
            <Image Source="ms-appx:///contact-avatar-test.png" />
            <StackPanel>
                    <TextBlock x:Name="_title_"
                               Text="[TEXT MISSING]"
                               TextWrapping="NoWrap"
                               VerticalAlignment="Center"
                               FontSize="20"
                               Margin="20,0" />
            </StackPanel>

        </StackPanel>
        <ScrollViewer x:Name="_scrollView_"
                       BorderThickness="0,1,0,0"
                       BorderBrush="LightBlue"
                       Grid.Row="1">
            <StackPanel>
                <ListBox x:Name="_messagesList_"
                         Margin="0"
                         Padding="0"
                         ItemContainerStyle="{StaticResource messageBubleStyle}"
                         ItemTemplate="{StaticResource ConversationMessageTemplate}">
                </ListBox>
            </StackPanel>
        </ScrollViewer>
        <Grid Height="50"
              Grid.Row="2"
              Margin="0"
              Padding="0"
              Background="#FFF2F2F2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBox x:Name="_messageTextBox_"
                     HorizontalAlignment="Stretch"
                     TextWrapping="NoWrap"
                     VerticalAlignment="Center"
                     Margin="10"
                     Background="White"
                     KeyDown="_messageTextBox__KeyDown"/>
        </Grid>
    </Grid>
</Page>