This is a migrated thread and some comments may be shown as answers.

Can't customize the Messages List Part

7 Answers 54 Views
Chat (Conversational UI)
This is a migrated thread and some comments may be shown as answers.
Omar
Top achievements
Rank 1
Omar asked on 03 Sep 2018, 06:15 AM
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.

7 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 06 Sep 2018, 05:44 AM
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.
0
Martin Ivanov
Telerik team
answered on 06 Sep 2018, 04:22 PM
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.
1
Accepted
Martin Ivanov
Telerik team
answered on 07 Sep 2018, 12:13 PM
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.
0
Omar
Top achievements
Rank 1
answered on 09 Sep 2018, 08:17 AM

Thanks Martin, That solved my issue.

one more question please, how to change the massage background 

0
Martin Ivanov
Telerik team
answered on 10 Sep 2018, 10:44 AM
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.
0
Omar
Top achievements
Rank 1
answered on 11 Sep 2018, 05:40 AM

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>

 

0
Omar
Top achievements
Rank 1
answered on 11 Sep 2018, 06:02 AM

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>
Tags
Chat (Conversational UI)
Asked by
Omar
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Omar
Top achievements
Rank 1
Share this question
or