Skip to content

Commit 7461b9f

Browse files
LakshminatarajanLakshminatarajan
committed
2025 Volume 4 feature UG commit
1 parent 63a71fb commit 7461b9f

File tree

5 files changed

+588
-33
lines changed

5 files changed

+588
-33
lines changed

‎MAUI/AIAssistView/items.md‎

Lines changed: 164 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -481,4 +481,167 @@ public class ViewModel : INotifyPropertyChanged
481481
{% endhighlight %}
482482
{% endtabs %}
483483

484-
![Error message in .NET MAUI AI AssistView](images/maui-aiassistview-error-message.png)
484+
![Error message in .NET MAUI AI AssistView](images/maui-aiassistview-error-message.png)
485+
486+
## Customizable (Targetable) views
487+
488+
The `SfAIAssistView` allows you to customize specific parts of request and response items without changing the entire UI. You can apply styles, templates, or subclass these views to create custom visuals and behavior.
489+
490+
The following views can be customized individually:
491+
492+
- `RequestTextView` – Represents the user request text content.
493+
- `RequestAssistImageView` – Represents the user request image content.
494+
- `RequestHyperlinkUrlLableView` – Represents the user request URL label area.
495+
- `RequestHyperLinkDetailsViewFrameView` – Represents the user request URL details/preview frame area.
496+
- `ResponseTextView` – Represents the AI response text content.
497+
- `ResponseAssistImageView` – Represents the AI response image content.
498+
- `ResponseHyperlinkUrlLableView` – Represents the AI response URL label area.
499+
- `ResponseHyperLinkDetailsViewFrameView` – Represents the AI response URL details/preview frame area.
500+
- `ResponseCardView` – Represents the container for card-based AI responses.
501+
- `CardItemView` – Represents a single card item within a response.
502+
- `CardButtonView` – Represents an action button inside a card item; exposes Title and Value bindable properties
503+
504+
{% tabs %}
505+
{% highlight xaml hl_lines="12 27" %}
506+
507+
<?xml version="1.0" encoding="utf-8"?>
508+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
509+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
510+
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.AIAssistView;assembly=Syncfusion.Maui.AIAssistView"
511+
x:Class="MauiAIAssistView.MainPage">
512+
513+
<ContentPage.BindingContext>
514+
<local:ViewModel/>
515+
</ContentPage.BindingContext>
516+
517+
<ContentPage.Resources>
518+
<ResourceDictionary>
519+
<!-- Request text customization -->
520+
<Style TargetType="syncfusion:RequestTextView">
521+
<Setter Property="ControlTemplate">
522+
<Setter.Value>
523+
<ControlTemplate>
524+
<Grid Padding="8" Background="Beige">
525+
<Label
526+
Text="{Binding Text}"
527+
FontSize="13"
528+
TextColor="Black" />
529+
</Grid>
530+
</ControlTemplate>
531+
</Setter.Value>
532+
</Setter>
533+
</Style>
534+
535+
<!-- Response text customization -->
536+
<Style TargetType="syncfusion:ResponseTextView">
537+
<Setter Property="ControlTemplate">
538+
<Setter.Value>
539+
<ControlTemplate>
540+
<Grid Padding="10" Background="LightSkyBlue">
541+
<Label
542+
Text="{Binding Text}"
543+
FontSize="13"
544+
FontAttributes="Italic"
545+
TextColor="White" />
546+
</Grid>
547+
</ControlTemplate>
548+
</Setter.Value>
549+
</Setter>
550+
</Style>
551+
...
552+
</ResourceDictionary>
553+
</ContentPage.Resources>
554+
555+
<ContentPage.Content>
556+
<syncfusion:SfAIAssistView x:Name="AssistView"
557+
AssistItems="{Binding AssistItems}" />
558+
</ContentPage.Content>
559+
</ContentPage>
560+
561+
{% endhighlight %}
562+
{% highlight c# hl_lines="18 41" %}
563+
564+
using Syncfusion.Maui.AIAssistView;
565+
566+
namespace MauiAIAssistView
567+
{
568+
public partial class MainPage : ContentPage
569+
{
570+
SfAIAssistView assistView;
571+
ViewModel viewModel;
572+
573+
public MainPage()
574+
{
575+
InitializeComponent();
576+
viewModel = new ViewModel();
577+
578+
assistView = new SfAIAssistView
579+
{
580+
AssistItems = viewModel.AssistItems;
581+
};
582+
583+
var resources = new ResourceDictionary();
584+
585+
// Request text customization
586+
var requestTextStyle = new Style(typeof(RequestTextView))
587+
{
588+
Setters =
589+
{
590+
new Setter
591+
{
592+
Property = RequestTextView.ControlTemplateProperty,
593+
Value = new ControlTemplate(() =>
594+
{
595+
var grid = new Grid { Padding = 8, Background = Colors.Beige };
596+
var label = new Label
597+
{
598+
FontSize = 13,
599+
TextColor = Colors.Black
600+
};
601+
label.SetBinding(Label.TextProperty, "Text");
602+
grid.Children.Add(label);
603+
return grid;
604+
})
605+
}
606+
}
607+
};
608+
609+
// Response text customization
610+
var responseTextStyle = new Style(typeof(ResponseTextView))
611+
{
612+
Setters =
613+
{
614+
new Setter
615+
{
616+
Property = ResponseTextView.ControlTemplateProperty,
617+
Value = new ControlTemplate(() =>
618+
{
619+
var grid = new Grid { Padding = 10, Background = Colors.LightSkyBlue };
620+
var label = new Label
621+
{
622+
FontSize = 13,
623+
FontAttributes = FontAttributes.Italic,
624+
TextColor = Colors.White
625+
};
626+
label.SetBinding(Label.TextProperty, "Text");
627+
grid.Children.Add(label);
628+
return grid;
629+
})
630+
}
631+
}
632+
};
633+
634+
...
635+
636+
resources.Add(requestTextStyle);
637+
resources.Add(responseTextStyle);
638+
639+
this.Resources = resources;
640+
this.Content = assistView;
641+
this.BindingContext = viewModel;
642+
}
643+
}
644+
}
645+
646+
{% endhighlight %}
647+
{% endtabs %}

‎MAUI/AIAssistView/styles.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1181,3 +1181,127 @@ public MainPage()
11811181
{% endtabs %}
11821182

11831183
![Common suggestion style in .NET MAUI AI AssistView](Images/styles/maui-aiassistview-styles-commonsuggestion.png)
1184+
1185+
## Scroll to buttom buttom style
1186+
1187+
To style the scroll to bottom button view based on its appearance, set values to the in-built keys in the resource dictionary.
1188+
1189+
<table>
1190+
<tr>
1191+
<th>Key</th>
1192+
<th>Description</th>
1193+
</tr>
1194+
<tr>
1195+
<td>ScrollToBottomButtonBackground</td>
1196+
<td>Background color of the scroll to bottom button view.</td>
1197+
</tr>
1198+
<tr>
1199+
<td>ScrollToBottomButtonIconColor</td>
1200+
<td>Color of the scroll to bottom button.</td>
1201+
</tr>
1202+
<tr>
1203+
<td>HoveredScrollToBottomButtonBackground</td>
1204+
<td>Background color of scroll to bottom button in hover state.</td>
1205+
</tr>
1206+
<tr>
1207+
<td>PressedScrollToBottomButtonBackground</td>
1208+
<td>Background color when the scroll to bottom button is pressed.</td>
1209+
</tr>
1210+
</table>
1211+
1212+
{% tabs %}
1213+
{% highlight xaml %}
1214+
1215+
<ContentPage.Resources>
1216+
<core:SyncfusionThemeDictionary>
1217+
<core:SyncfusionThemeDictionary.MergedDictionaries>
1218+
<ResourceDictionary>
1219+
<x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
1220+
<Color x:Key="SfAIAssistViewScrollToBottomButtonBackground">Orange</Color>
1221+
<Color x:Key="SfAIAssistViewScrollToBottomButtonIconColor">White</Color>
1222+
<Color x:Key="SfAIAssistViewHoveredScrollToBottomButtonBackground">DarkOrange</Color>
1223+
<Color x:Key="SfAIAssistViewPressedScrollToBottomButtonBackground">Red</Color>
1224+
</ResourceDictionary>
1225+
</core:SyncfusionThemeDictionary.MergedDictionaries>
1226+
</core:SyncfusionThemeDictionary>
1227+
</ContentPage.Resources>
1228+
1229+
{% endhighlight %}
1230+
{% highlight c# %}
1231+
1232+
public MainPage()
1233+
{
1234+
InitializeComponent();
1235+
ResourceDictionary dictionary = new ResourceDictionary();
1236+
dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
1237+
dictionary.Add("SfAIAssistViewScrollToBottomButtonBackground", Colors.Orange);
1238+
dictionary.Add("SfAIAssistViewScrollToBottomButtonIconColor", Colors.White);
1239+
dictionary.Add("SfAIAssistViewHoveredScrollToBottomButtonBackground", Colors.DarkOrange);
1240+
dictionary.Add("SfAIAssistViewPressedScrollToBottomButtonBackground", Colors.Red);
1241+
this.Resources.Add(dictionary);
1242+
}
1243+
1244+
{% endhighlight %}
1245+
{% endtabs %}
1246+
1247+
## Action button style
1248+
1249+
To style the action button view based on its appearance, set values to the in-built keys in the resource dictionary.
1250+
1251+
<table>
1252+
<tr>
1253+
<th>Key</th>
1254+
<th>Description</th>
1255+
</tr>
1256+
<tr>
1257+
<td>ActionButtonBackground</td>
1258+
<td>Background color of the action button.</td>
1259+
</tr>
1260+
<tr>
1261+
<td>ActionButtonIconColor</td>
1262+
<td>Color of the action button.</td>
1263+
</tr>
1264+
<tr>
1265+
<td>ActionButtonTextColor</td>
1266+
<td>Text color of an item in the action button.</td>
1267+
</tr>
1268+
<tr>
1269+
<td>ActionButtonViewBackground</td>
1270+
<td>Background color of the action buttons view.</td>
1271+
</tr>
1272+
</table>
1273+
1274+
{% tabs %}
1275+
{% highlight xaml %}
1276+
1277+
<ContentPage.Resources>
1278+
<core:SyncfusionThemeDictionary>
1279+
<core:SyncfusionThemeDictionary.MergedDictionaries>
1280+
<ResourceDictionary>
1281+
<x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
1282+
<Color x:Key="SfAIAssistViewActionButtonBackground">Orange</Color>
1283+
<Color x:Key="SfAIAssistViewActionButtonIconColor">White</Color>
1284+
<Color x:Key="SfAIAssistViewActionButtonTextColor">Black</Color>
1285+
<Color x:Key="SfAIAssistViewActionButtonViewBackground">LightGray</Color>
1286+
</ResourceDictionary>
1287+
</core:SyncfusionThemeDictionary.MergedDictionaries>
1288+
</core:SyncfusionThemeDictionary>
1289+
</ContentPage.Resources>
1290+
1291+
{% endhighlight %}
1292+
{% highlight c# %}
1293+
1294+
public MainPage()
1295+
{
1296+
InitializeComponent();
1297+
ResourceDictionary dictionary = new ResourceDictionary();
1298+
dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
1299+
dictionary.Add("SfAIAssistViewActionButtonBackground", Colors.Orange);
1300+
dictionary.Add("SfAIAssistViewActionButtonIconColor", Colors.White);
1301+
dictionary.Add("SfAIAssistViewActionButtonTextColor", Colors.Black);
1302+
dictionary.Add("SfAIAssistViewActionButtonViewBackground", Colors.LightGray);
1303+
this.Resources.Add(dictionary);
1304+
}
1305+
1306+
{% endhighlight %}
1307+
{% endtabs %}

0 commit comments

Comments
 (0)