Can't customize the Messages List Part

[Omar]

How can I customize the Message List Part,  Its an ItemsPresenter , I want to change messages font and make the avatar little bigger. nothing is mentioned in the documentation for how to do this.

[Martin Ivanov]

Hello Omar,

I will get back to you later today.

Regards,
Martin Ivanov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[Martin Ivanov]

Hello Omar,

Won't be able to prepare a reply today. I will get back tomorrow.

Regards,
Martin Ivanov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[Martin Ivanov]

Hello Omar,

If you want to customize the template of the ChatMessageList control you can extract its Style from the corresponding .xaml file and change whatever you like. Then extract the RadChat template and set the custom template to the ChatMessageList defined there.

An easier approach would be to modify the style of the message controls using implicit styles. To change the font you can define the following style in the Window or the Application Resources (for example).

<Window.Resources>
    <Style TargetType="conversationalUI:InlineMessageControl">
        <Setter Property="FontSize" Value="22" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Window.Resources>

To change the size of the author's avatar you can extract the MessageGroup template and modify the Width and Height of the Image that holds the avatar. Here is an example in code:

<Window.Resources>
    <telerik:InvertedBooleanToVisibilityConverter x:Key="InvertedBooleanToVisibilityConverter" />
    <Style TargetType="{x:Type conversationalUI:MessageGroup}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type conversationalUI:MessageGroup}">
                    <DockPanel>
                        <Image
                            Source="{Binding Author.Avatar}"
                            DockPanel.Dock="{Binding AvatarAlignment}"
                            RenderOptions.BitmapScalingMode="HighQuality"
                            SnapsToDevicePixels="True"
                            Margin="0 20 0 0"
                            Height="28"
                            Width="28"
                            VerticalAlignment="Top"
                            Stretch="UniformToFill">
                            <Image.Clip>
                                <EllipseGeometry RadiusX="14" RadiusY="14" Center="14, 14"/>
                            </Image.Clip>
                        </Image>
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" MinHeight="20"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <StackPanel Orientation="Horizontal" Opacity="0.7" TextElement.FontSize="10" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                                <TextBlock Text="{Binding CreationDate, StringFormat={}{0:t}}"/>
                                <StackPanel Orientation="Horizontal" Visibility="{Binding Author.IsCurrent, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
                                    <TextBlock Text=","/>
                                    <TextBlock Text="{Binding Author.Name}"/>
                                </StackPanel>
                            </StackPanel>
                            <ItemsPresenter Grid.Row="1"/>
                        </Grid>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Please note that template was extracted from the Fluent theme .xaml. If you need the template for another theme please extract it from the corresponding theme .xaml file and apply the described modification.

Regards,
Martin Ivanov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[Omar]

Thanks Martin, That solved my issue.

one more question please, how to change the massage background 

[Martin Ivanov]

Hello Omar,

To achieve this you can extract the ControlTemplate of the TextMessageControl and change few properties there. Here is an example in code:

<Window.Resources>
    <Style TargetType="chat:TextMessageControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chat:TextMessageControl">
                    <Grid MinHeight="{TemplateBinding MinHeight}">
                        <!--Background Changed-->
                        <Border x:Name="MessageBorder"
                            Background="Green">
                            <TextBox Foreground="{TemplateBinding Foreground}"
                                 BorderThickness="0"
                                 Padding="{TemplateBinding Padding}"
                                 Background="Transparent"
                                 x:Name="PART_TextMessageTextBox"
                                 VerticalAlignment="Center"
                                 telerik:TouchManager.ShouldSuspendMousePromotion="True"
                                 IsReadOnly="True"
                                 TextWrapping="Wrap"
                                 ScrollViewer.PanningMode="None"
                                 AcceptsReturn="True"
                                 Text="{TemplateBinding Text}">
                                <telerik:RadContextMenu.ContextMenu>
                                    <telerik:RadContextMenu>
                                        <telerik:RadMenuItem Command="ApplicationCommands.Copy" />
                                        <telerik:RadMenuItem Command="ApplicationCommands.SelectAll" />
                                    </telerik:RadContextMenu>
                                </telerik:RadContextMenu.ContextMenu>
                            </TextBox>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type chat:InlineMessageControl}}, Path=HorizontalAlignment}" Value="Right">
                            <!--Value Changed-->
                            <Setter Property="Background" Value="Red" />
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

I've marked the changes with comments.

Regards,
Martin Ivanov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

[Omar]

Thanks Martin,

Are you sure the following DataTrigger is working? because it didn't work for me, I tried the FlowDirection but it didn't work also.

 

<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type chat:InlineMessageControl}}, Path=HorizontalAlignment}" Value="Right">
                            <!--Value Changed-->
                            <Setter Property="Background" Value="Red"/>
</DataTrigger>

 

[Omar]

Dear Martin,

 In order to The DataTrigger to work properly, I've attached it to the Border Directly

 

<Style TargetType="conversationalUI:TextMessageControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="conversationalUI:TextMessageControl">
                        <Grid MinHeight="{TemplateBinding MinHeight}">
                            <!--Background Changed-->
                            <Border x:Name="MessageBorder" >
                                <Border.Style>
                                    <Style>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type conversationalUI:InlineMessageControl}}, Path=HorizontalAlignment}" Value="Left">
                                                <!--Value Changed-->
                                                <Setter Property="Border.Background" Value="#f66a59" />
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type conversationalUI:InlineMessageControl}}, Path=HorizontalAlignment}" Value="Right">
                                                <!--Value Changed-->
                                                <Setter Property="Border.Background" Value="WhiteSmoke" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Border.Style>

                                <TextBox Foreground="{TemplateBinding Foreground}"
                                 BorderThickness="0"
                                 Padding="{TemplateBinding Padding}"
                                 Background="Transparent"
                                 x:Name="PART_TextMessageTextBox"
                                 VerticalAlignment="Center"
                                 telerik:TouchManager.ShouldSuspendMousePromotion="True"
                                 IsReadOnly="True"
                                 TextWrapping="Wrap"
                                 FontSize="18"
                                 ScrollViewer.PanningMode="None"
                                 AcceptsReturn="True"
                                 Text="{TemplateBinding Text}">
                                    <telerik:RadContextMenu.ContextMenu>
                                        <telerik:RadContextMenu>
                                            <telerik:RadMenuItem Command="ApplicationCommands.Copy" />
                                            <telerik:RadMenuItem Command="ApplicationCommands.SelectAll" />
                                        </telerik:RadContextMenu>
                                    </telerik:RadContextMenu.ContextMenu>
                                </TextBox>
                            </Border>
                        </Grid>
                        <!--<ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type conversationalUI:InlineMessageControl}}, Path=FlowDirection}" Value="RightToLeft">
                                -->
                        <!--Value Changed-->
                        <!--
                                <Setter Property="Background" Value="Red" />
                            </DataTrigger>
                        </ControlTemplate.Triggers>-->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>