How to change internal template style in xaml version

1 Answer 24 Views
General Discussions Styling
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Psyduck asked on 21 Jul 2021, 12:17 AM | edited on 21 Jul 2021, 12:37 AM

Hello.

I'm working on changing from noxaml to xaml.
There was a problem while working.

The source below is imported to customize the Template of RadGridView GridViewSearchPanel.
<Style TargetType="telerik:GridViewSearchPanel">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="telerik:GridViewSearchPanel">
				<Border BorderThickness="0" Background="AliceBlue" BorderBrush="Transparent">
					<Grid UseLayoutRounding="True">
						<Grid.ColumnDefinitions>
							<ColumnDefinition/>
							<ColumnDefinition Width="Auto"/>
						</Grid.ColumnDefinitions>
						<Grid>
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition Width="Auto"/>
							</Grid.ColumnDefinitions>
							<TextBlock	telerik:LocalizationManager.ResourceKey="GridViewSearchPanelTopText"
													TextWrapping="Wrap"
													Margin="{TemplateBinding Padding}"
													HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
													VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
													IsHitTestVisible="False"/>
							<Grid Grid.Column="1" Margin="10 0" VerticalAlignment="Center">
								<TextBox x:Name="PART_SearchAsYouTypeTextBox"
													AutomationProperties.Name="search as you type textBox"
													Text="{Binding SearchText, Mode=TwoWay}"
													MinWidth="160"
													MaxWidth="200"
													Padding="5 3 15 3"
													telerik:TextBoxBehavior.UpdateTextOnEnter="True"
													IsTabStop="{TemplateBinding IsTabStop}"
													FontSize="{TemplateBinding FontSize}"
													FontFamily="{TemplateBinding FontFamily}"
													MinHeight="28"/>
								<telerik:RadButton	IsTabStop="False" Visibility="Visible"
											Style="{StaticResource ClearSearchValueButtonStyle}"
											Command="searchPanel:GridViewSearchPanelCommands.ClearSearchValue"/>
							</Grid>
						</Grid>

					</Grid>
				</Border>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

The method I know of is to take the style of noxaml as it is and redefine it.

<Style x:Key="ClearSearchValueButtonStyle" TargetType="telerik:RadButton">
        <Setter Property="Template" Value="{StaticResource ClearSearchValueButtonTemplate}"/>
        <Setter Property="Foreground" Value="{telerik1:FluentResource ResourceKey=IconBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Width" Value="28"/>
        <Setter Property="Height" Value="28"/>
        <Setter Property="HorizontalAlignment" Value="Right"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="{telerik1:FluentResource ResourceKey=AccentMouseOverBrush}"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Foreground" Value="{telerik1:FluentResource ResourceKey=AccentPressedBrush}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

If other styles are not defined, will they be applied automatically?

The style was applied as 'Setting Application-Wide Built-in Theme in the Code-Behind'.

 

Also, Is there a way to override Style 'x:key="SearchPanel" TargetType="telerik:GridViewSearchPanel"' and apply it to <telerik:RadGridView> as a key value?

If you create and define multiple gridviews in one xaml, they are all applied. I want to apply only one.

 

Thanks.

1 Answer, 1 is accepted

Sort by
1
Accepted
Dilyan Traykov
Telerik team
answered on 22 Jul 2021, 10:08 AM

Hello,

Thank you for the provided code snippets.

Based on them, I set up a small sample project which I believe demonstrates how to achieve your requirement. Please find it attached.

To answer your inquiries, when using the standard Xaml binaries, you will need to include the required resources either explicitly or by merging the corresponding dictionaries like so:

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericFluent.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Controls.Input;component/Themes/GenericFluent.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Controls.GridView;component/Themes/GenericFluent.xaml"/>
            </ResourceDictionary.MergedDictionaries>

As for applying the style only to a particular RadGridView instance, you can assign the style an x:Key and then add the following code to the desired controls:

            <telerik:RadGridView.Resources>
                <Style TargetType="telerik:GridViewSearchPanel" BasedOn="{StaticResource CustomSearchPanelStyle}" />
            </telerik:RadGridView.Resources>

I hope you find the sample project and these clarifications helpful. Please let me know if this answers your inquiry or if I've misunderstood you in any way.

Regards,
Dilyan Traykov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
commented on 25 Jul 2021, 11:33 PM

Thanks for providing the sample project.

I have to call all the necessary Styles and redefine them. (Like overriding)

This is how I understood it.
Tags
General Discussions Styling
Asked by
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Answers by
Dilyan Traykov
Telerik team
Share this question
or