Category / Section
How to customize the control style to match the custom theme?
1 min read
Syncfusion controls enable you to use a control and implement your own design. You can design the controls to match certain themes by editing the Style and Template property of the control. In the following code example, SfHubTile and SfTextBoxExt controls are customized to match a certain theme.
XAML
<Page
x:Class="CustomTheme.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomTheme"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input"
xmlns:notification="using:Syncfusion.UI.Xaml.Controls.Notification"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<SolidColorBrush x:Name="TextForegroundBrush" Color="#FF415462"/>
<SolidColorBrush x:Name="ControlBackgroundBrush" Color="#FFC3C4C5"/>
<SolidColorBrush x:Name="HubBackgroundBrush" Color="#FF1E3241"/>
</Page.Resources>
<Grid Background="{StaticResource ControlBackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<input:SfTextBoxExt Text="Doors Locks">
<input:SfTextBoxExt.Style>
<Style TargetType="input:SfTextBoxExt" >
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0 20 0 0"/>
<Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
</input:SfTextBoxExt.Style>
</input:SfTextBoxExt>
<Pivot Grid.Row="1">
<PivotItem Header="locks" Margin="0" Foreground="{StaticResource TextForegroundBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<input:SfTextBoxExt Text="last known status">
<input:SfTextBoxExt.Style>
<Style TargetType="input:SfTextBoxExt">
<Setter Property="FontSize" Value="15"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="10 0 0 0"/>
<Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
</input:SfTextBoxExt.Style>
</input:SfTextBoxExt>
<input:SfTextBoxExt Text="unlocked" Grid.Row="1">
<input:SfTextBoxExt.Style>
<Style TargetType="input:SfTextBoxExt">
<Setter Property="FontSize" Value="50"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="10 0 0 0"/>
<Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
</input:SfTextBoxExt.Style>
</input:SfTextBoxExt>
<input:SfTextBoxExt Text="days hours minutes" Grid.Row="2">
<input:SfTextBoxExt.Style>
<Style TargetType="input:SfTextBoxExt">
<Setter Property="FontSize" Value="20"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="10 0 0 0"/>
<Setter Property="Foreground" Value="{StaticResource TextForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
</input:SfTextBoxExt.Style>
</input:SfTextBoxExt>
<Grid Grid.Row="4">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<notification:SfHubTile Background="{StaticResource HubBackgroundBrush}" Height="200" VerticalAlignment="Top" Margin="10,10,10,0" >
<notification:SfHubTile.HeaderTemplate>
<DataTemplate>
<input:SfTextBoxExt Text="lock" Margin="40 0" Foreground="White" Background="Transparent" BorderBrush="Transparent" RenderTransformOrigin="1.538,0.349"/>
</DataTemplate>
</notification:SfHubTile.HeaderTemplate>
<Image Source="Images/Lock-Open.png" Stretch="Uniform"/>
</notification:SfHubTile>
<notification:SfHubTile Grid.Column="1" Background="{StaticResource HubBackgroundBrush}" Height="200" VerticalAlignment="Top" Margin="10,10,10,0" >
<notification:SfHubTile.HeaderTemplate>
<DataTemplate>
<input:SfTextBoxExt Text="unlock" Margin="30 0" Foreground="White" Background="Transparent" BorderBrush="Transparent" RenderTransformOrigin="1.538,0.349"/>
</DataTemplate>
</notification:SfHubTile.HeaderTemplate>
<Image Source="Images/Lock.png" Stretch="Uniform"/>
</notification:SfHubTile>
</Grid>
</Grid>
</PivotItem>
<PivotItem Header="doors" Margin="0">
</PivotItem>
</Pivot>
<Grid Background="{StaticResource HubBackgroundBrush}" Grid.Row="2">
<AppBarButton Click="AppBarButton_Click" HorizontalAlignment="Center">
<Image Source="Images/Command-Reset.png" Stretch="Uniform"/>
</AppBarButton>
</Grid>
</Grid>
</Page>
The following screenshot displays the customized SfHubTile and SfTextBoxExt.
Figure 1: Customized SfHubTile and SfTextBoxExt
In the following code example, SfTreeNavigator is customized.
XAML
<Page
x:Class="CustomTheme.BlankPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomTheme"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input"
xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
<local:ViewModel/>
</Page.DataContext>
<Page.Resources>
<SolidColorBrush x:Name="TextForegroundBrush" Color="#FF415462"/>
<SolidColorBrush x:Name="ControlBackgroundBrush" Color="#FFC3C4C5"/>
<SolidColorBrush x:Name="HubBackgroundBrush" Color="#FF1E3241"/>
<Style TargetType="input:SfTextBoxExt" x:Key="HeaderStyle">
<Setter Property="FontSize" Value="20"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0 20 0 0"/>
<Setter Property="Foreground" Value="#FF415462"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
<Style TargetType="input:SfTextBoxExt" x:Key="HubStyle">
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Foreground" Value="#FF1A1A1A"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
<DataTemplate x:Key="TreeTemplate">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Stretch="Uniform"/> <input:SfTextBoxExt Text="{Binding Name}" Grid.Column="1" Style="{StaticResource HubStyle}"/>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{StaticResource HubBackgroundBrush}">
<Pivot>
<PivotItem Header="features" Margin="0">
<Grid Background="{StaticResource ControlBackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel>
<input:SfTextBoxExt Text="status" Style="{StaticResource HeaderStyle}"/>
<navigation:SfTreeNavigator Grid.Row="1" ItemsSource="{Binding Status}" ItemTemplate="{StaticResource TreeTemplate}"></navigation:SfTreeNavigator>
<input:SfTextBoxExt Text="location" Grid.Row="2" Style="{StaticResource HeaderStyle}"/>
<navigation:SfTreeNavigator Grid.Row="3" ItemsSource="{Binding Location}" ItemTemplate="{StaticResource TreeTemplate}"></navigation:SfTreeNavigator>
</StackPanel>
</Grid>
</PivotItem>
<PivotItem Header="edit" Margin="0">
</PivotItem>
</Pivot>
</Grid>
</Page>
C#
public class ViewModel
{
public ViewModel()
{
Status = new ObservableCollection<Model>();
Status.Add(new Model("dashboard", "/Images/status1.png"));
Status.Add(new Model("doors & locks", "/Images/ status2.png"));
Status.Add(new Model("heater", "/Images/ status3.png"));
Status.Add(new Model("remote start", "/Images/ status4.png"));
Location = new ObservableCollection<Model>();
Location.Add(new Model("map", "/Images/Location1.png"));
Location.Add(new Model("Honk & Flash", "/Images/Location2.png"));
}
private ObservableCollection<Model> status;
public ObservableCollection<Model> Status
{
get { return status; }
set { status = value; }
}
private ObservableCollection<Model> location;
public ObservableCollection<Model> Location
{
get { return location; }
set { location = value; }
}
}
public class Model
{
public Model(string name, string ipath)
{
Name = name;
ImagePath = ipath;
}
private string imagepath;
public string ImagePath
{
get { return imagepath; }
set { imagepath = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
}
The following screenshot displays the customized SfTreeNavigator.
Figure 2: Customized SfTreeNavigator
