update control templates
This commit is contained in:
Родитель
452f14c148
Коммит
da4ad15672
|
@ -22,53 +22,61 @@ xmlns:telerikConversationalUI="clr-namespace:Telerik.XamarinForms.Conversational
|
|||
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
|
||||
```
|
||||
|
||||
Then here is the RadChat default control template. Add it to the Page resources:
|
||||
|
||||
```XAML
|
||||
<ResourceDictionary>
|
||||
<telerikConversationalUI:ChatListViewMarginConverter x:Key="ChatListViewMarginConverter" />
|
||||
|
||||
<ControlTemplate x:Key="RadChat_ControlTemplate">
|
||||
<Grid telerikInput:KeyboardHelper.IsTranslationTarget="True"
|
||||
RowSpacing="2">
|
||||
RowSpacing="2">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<telerikConversationalUI:ChatListView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
|
||||
AutoScrollMode="{TemplateBinding AutoScrollMode}"
|
||||
ScrollMediator="{TemplateBinding ActualScrollMediator}"
|
||||
Margin="{Binding Height, Source={x:Reference PickerContainer}, Converter={StaticResource ChatListViewMarginConverter}}"
|
||||
ItemTemplate="{TemplateBinding ItemTemplateSelector}"
|
||||
ItemsSource="{TemplateBinding Items}"
|
||||
AutomationProperties.Name="ChatListView" />
|
||||
AutoScrollMode="{TemplateBinding AutoScrollMode}"
|
||||
ScrollMediator="{TemplateBinding ActualScrollMediator}"
|
||||
Margin="{Binding Height, Source={x:Reference PickerContainer}, Converter={StaticResource ChatListViewMarginConverter}}"
|
||||
ItemTemplate="{TemplateBinding ItemTemplateSelector}"
|
||||
ItemsSource="{TemplateBinding Items}"
|
||||
AutomationProperties.Name="ChatListView" />
|
||||
<telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
|
||||
Grid.Row="1"
|
||||
Content="{TemplateBinding TypingIndicator}" />
|
||||
Grid.Row="1"
|
||||
Content="{TemplateBinding TypingIndicator}" />
|
||||
<telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
|
||||
x:Name="PickerContainer"
|
||||
VerticalOptions="End"
|
||||
Content="{TemplateBinding Picker}" />
|
||||
<Grid Grid.Row="2" BackgroundColor="{TemplateBinding InputAreaBackgroundColor}" Padding="5, 0, 0, 0">
|
||||
x:Name="PickerContainer"
|
||||
VerticalOptions="End"
|
||||
Content="{TemplateBinding Picker}" />
|
||||
<Grid x:Name="PART_InputAreaGrid"
|
||||
Grid.Row="2"
|
||||
Padding="5, 0, 0, 0"
|
||||
telerikInput:KeyboardHelper.IsTranslationPivot="True">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<telerikConversationalUI:ChatEntry telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
|
||||
Text="{TemplateBinding Message, Mode=TwoWay}"
|
||||
BackgroundColor="Transparent"
|
||||
VerticalOptions="Center"
|
||||
CompletedCommand="{TemplateBinding ActualSendMessageCommand}"
|
||||
FocusMediator="{TemplateBinding FocusMediator}"
|
||||
telerikInput:KeyboardHelper.IsTranslationSource="True" />
|
||||
<telerikInput:RadButton telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
|
||||
Grid.Column="1"
|
||||
Margin="0, 0, 10, 0"
|
||||
BackgroundImage="{TemplateBinding SendMessageButtonImage}"
|
||||
BackgroundColor="Transparent"
|
||||
Command="{TemplateBinding ActualSendMessageCommand}"
|
||||
WidthRequest="30"
|
||||
HeightRequest="30"
|
||||
VerticalOptions="Center" />
|
||||
|
||||
<telerikConversationalUI:ChatEntry
|
||||
telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
|
||||
Text="{TemplateBinding Message, Mode=TwoWay}"
|
||||
BackgroundColor="Transparent"
|
||||
VerticalOptions="Center"
|
||||
CompletedCommand="{TemplateBinding ActualSendMessageCommand}"
|
||||
FocusMediator="{TemplateBinding FocusMediator}"
|
||||
telerikInput:KeyboardHelper.IsTranslationSource="True" />
|
||||
|
||||
<telerikInput:RadButton x:Name="PART_SendMessageButton"
|
||||
telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
|
||||
Grid.Column="1"
|
||||
Margin="0, 0, 10, 0"
|
||||
BackgroundColor="Transparent"
|
||||
Command="{TemplateBinding ActualSendMessageCommand}"
|
||||
WidthRequest="30"
|
||||
HeightRequest="30"
|
||||
VerticalOptions="Center" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
|
|
|
@ -19,6 +19,7 @@ The XAML defined below relies on the following namespaces to be set:
|
|||
```xml
|
||||
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
|
||||
xmlns:numericInput="clr-namespace:Telerik.XamarinForms.Input.NumericInput;assembly=Telerik.XamarinForms.Input"
|
||||
xmlns:common="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
|
||||
```
|
||||
|
||||
<snippet id='numericinput-resources-controltemplate' />
|
||||
|
|
|
@ -27,81 +27,103 @@ Here is the definition of the
|
|||
<ResourceDictionary>
|
||||
<!-- IndicatorTemplate -->
|
||||
<ControlTemplate x:Key="RadSlideView_IndicatorTemplate">
|
||||
<Label Text="{TemplateBinding IndicatorText}"
|
||||
FontSize="{TemplateBinding IndicatorFontSize}"
|
||||
FontFamily="{TemplateBinding IndicatorFontFamily}"
|
||||
VerticalOptions="Center"
|
||||
TextColor="{TemplateBinding IndicatorColor}">
|
||||
<Label.GestureRecognizers>
|
||||
<TapGestureRecognizer Tapped="IndicatorTapped" NumberOfTapsRequired="1"/>
|
||||
</Label.GestureRecognizers>
|
||||
</Label>
|
||||
</ControlTemplate>
|
||||
<Label Text="{TemplateBinding IndicatorText}"
|
||||
FontSize="{TemplateBinding IndicatorFontSize}"
|
||||
FontFamily="{TemplateBinding IndicatorFontFamily}"
|
||||
VerticalOptions="Center"
|
||||
TextColor="{TemplateBinding IndicatorColor}" />
|
||||
</ControlTemplate>
|
||||
|
||||
<!-- SelectedIndicatorTemplate -->
|
||||
<ControlTemplate x:Key="RadSlideView_SelectedIndicatorTemplate">
|
||||
<Label Text="{TemplateBinding SelectedIndicatorText}"
|
||||
FontSize="{TemplateBinding SelectedIndicatorFontSize}"
|
||||
FontFamily="{TemplateBinding SelectedIndicatorFontFamily}"
|
||||
VerticalOptions="Center"
|
||||
<!-- SelectedIndicator ControlTemplate -->
|
||||
<ControlTemplate x:Key="RadSlideView_SelectedIndicatorTemplate">
|
||||
<Label Text="{TemplateBinding SelectedIndicatorText}"
|
||||
FontSize="{TemplateBinding SelectedIndicatorFontSize}"
|
||||
FontFamily="{TemplateBinding SelectedIndicatorFontFamily}"
|
||||
VerticalOptions="Center"
|
||||
TextColor="{TemplateBinding SelectedIndicatorColor}" />
|
||||
</ControlTemplate>
|
||||
</ControlTemplate>
|
||||
|
||||
<!-- ControlTemplate -->
|
||||
<ControlTemplate x:Key="RadSlideView_ControlTemplate">
|
||||
<Grid>
|
||||
<!-- Content Presenter -->
|
||||
<ContentPresenter AutomationId="SlideViewContentPresenter"/>
|
||||
|
||||
<!-- Left Arrow -->
|
||||
<Label AutomationId="SlideViewLeftArrow"
|
||||
VerticalOptions="Center"
|
||||
IsVisible="{TemplateBinding ShowButtons}"
|
||||
Text="‹"
|
||||
FontSize="{TemplateBinding SlideButtonsSize}"
|
||||
FontFamily="Arial"
|
||||
HorizontalOptions="Start"
|
||||
TextColor="{TemplateBinding SlideButtonsColor}">
|
||||
<Label.GestureRecognizers>
|
||||
<TapGestureRecognizer Command="{TemplateBinding Path=PreviousItemCommand}"/>
|
||||
</Label.GestureRecognizers>
|
||||
</Label>
|
||||
|
||||
<!-- Right Arrow -->
|
||||
<Label AutomationId="SlideViewRightArrow"
|
||||
VerticalOptions="Center"
|
||||
Text="›"
|
||||
IsVisible="{TemplateBinding ShowButtons}"
|
||||
FontSize="{TemplateBinding SlideButtonsSize}"
|
||||
FontFamily="Arial"
|
||||
HorizontalOptions="End"
|
||||
TextColor="{TemplateBinding SlideButtonsColor}">
|
||||
<Label.GestureRecognizers>
|
||||
<TapGestureRecognizer Command="{TemplateBinding Path=NextItemCommand}"/>
|
||||
</Label.GestureRecognizers>
|
||||
<AutomationProperties.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="Navigate Forward" />
|
||||
<On Platform="UWP" Value="Navigate Forward" />
|
||||
</OnPlatform>
|
||||
</AutomationProperties.HelpText>
|
||||
<AutomationProperties.Name>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="RadSlideView" />
|
||||
<On Platform="UWP" Value="RadSlideView" />
|
||||
</OnPlatform>
|
||||
</AutomationProperties.Name>
|
||||
</Label>
|
||||
|
||||
<!-- SlideView indicators-->
|
||||
<slideView:SlideViewIndicators Owner="{TemplateBinding}"
|
||||
SelectedIndicatorTemplate="{TemplateBinding SelectedIndicatorTemplate}"
|
||||
<!-- SlideView ControlTemplate -->
|
||||
<ControlTemplate x:Key="RadSlideView_ControlTemplate">
|
||||
<Grid>
|
||||
<ContentPresenter AutomationId="SlideViewContentPresenter" />
|
||||
|
||||
<telerikPrimitives:SlideViewLabel AutomationId="SlideViewLeftArrow"
|
||||
VerticalOptions="Center"
|
||||
IsVisible="{TemplateBinding ShowButtons}"
|
||||
Text="‹"
|
||||
FontSize="{TemplateBinding SlideButtonsSize}"
|
||||
FontFamily="Arial"
|
||||
HorizontalOptions="Start"
|
||||
TextColor="{TemplateBinding SlideButtonsColor}">
|
||||
<common:TelerikEffects.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="Android" Value="RadSlideView Navigate Backward" />
|
||||
</OnPlatform>
|
||||
</common:TelerikEffects.HelpText>
|
||||
<telerikPrimitives:SlideViewLabel.Effects>
|
||||
<common:HelpTextEffect/>
|
||||
</telerikPrimitives:SlideViewLabel.Effects>
|
||||
<telerikPrimitives:SlideViewLabel.GestureRecognizers>
|
||||
<TapGestureRecognizer Command="{TemplateBinding Path=PreviousItemCommand}" />
|
||||
</telerikPrimitives:SlideViewLabel.GestureRecognizers>
|
||||
<AutomationProperties.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="Navigate Backward" />
|
||||
<On Platform="UWP" Value="Navigate Backward" />
|
||||
</OnPlatform>
|
||||
</AutomationProperties.HelpText>
|
||||
<AutomationProperties.Name>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="RadSlideView" />
|
||||
<On Platform="UWP" Value="RadSlideView" />
|
||||
</OnPlatform>
|
||||
</AutomationProperties.Name>
|
||||
</telerikPrimitives:SlideViewLabel>
|
||||
|
||||
<telerikPrimitives:SlideViewLabel AutomationId="SlideViewRightArrow"
|
||||
VerticalOptions="Center"
|
||||
Text="›"
|
||||
IsVisible="{TemplateBinding ShowButtons}"
|
||||
FontSize="{TemplateBinding SlideButtonsSize}"
|
||||
FontFamily="Arial"
|
||||
HorizontalOptions="End"
|
||||
TextColor="{TemplateBinding SlideButtonsColor}">
|
||||
<common:TelerikEffects.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="Android" Value="RadSlideView Navigate Forward" />
|
||||
</OnPlatform>
|
||||
</common:TelerikEffects.HelpText>
|
||||
<telerikPrimitives:SlideViewLabel.Effects>
|
||||
<common:HelpTextEffect />
|
||||
</telerikPrimitives:SlideViewLabel.Effects>
|
||||
<telerikPrimitives:SlideViewLabel.GestureRecognizers>
|
||||
<TapGestureRecognizer Command="{TemplateBinding Path=NextItemCommand}" />
|
||||
</telerikPrimitives:SlideViewLabel.GestureRecognizers>
|
||||
<AutomationProperties.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="Navigate Forward" />
|
||||
<On Platform="UWP" Value="Navigate Forward" />
|
||||
</OnPlatform>
|
||||
</AutomationProperties.HelpText>
|
||||
<AutomationProperties.Name>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="RadSlideView" />
|
||||
<On Platform="UWP" Value="RadSlideView" />
|
||||
</OnPlatform>
|
||||
</AutomationProperties.Name>
|
||||
</telerikPrimitives:SlideViewLabel>
|
||||
|
||||
<slideView:SlideViewIndicators Owner="{TemplateBinding}"
|
||||
Spacing="{TemplateBinding Path=IndicatorsSpacing}"
|
||||
SelectedIndicatorTemplate="{TemplateBinding SelectedIndicatorTemplate}"
|
||||
IndicatorTemplate="{TemplateBinding IndicatorTemplate}"
|
||||
IsVisible="{TemplateBinding ShowIndicators}"
|
||||
IsVisible="{TemplateBinding ShowIndicators}"
|
||||
VerticalOptions="End"
|
||||
HorizontalOptions="Center"/>
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
HorizontalOptions="Center"
|
||||
InputTransparent="True" />
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
</ResourceDictionary>
|
||||
</ContentPage.Resources>
|
||||
```
|
||||
|
@ -111,6 +133,7 @@ where the Telerik namespace is as follow:
|
|||
```XAML
|
||||
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
|
||||
xmlns:slideView="clr-namespace:Telerik.XamarinForms.Primitives.SlideView;assembly=Telerik.XamarinForms.Primitives"
|
||||
xmlns:common="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
|
||||
```
|
||||
|
||||
Finally, use the custom ControlTemplate, IndicatorTemplate and SelectedIndicatorTemplate as a **StaticResource** on any instance of RadSlideView:
|
||||
|
|
|
@ -24,11 +24,11 @@ xmlns:telerikTreeView="clr-namespace:Telerik.XamarinForms.DataControls.TreeView;
|
|||
|
||||
```XAML
|
||||
<ResourceDictionary>
|
||||
<telerikTreeView:LevelToMarginConverter x:Key="levelToMarginConverter" />
|
||||
<telerikTreeView:LevelToMarginConverter x:Key="levelToMarginConverter" />
|
||||
|
||||
<DataTemplate x:Key="CustomControlTemplate">
|
||||
<StackLayout Orientation="Horizontal"
|
||||
Margin="{Binding Path=Level, Converter={StaticResource levelToMarginConverter}}">
|
||||
Margin="{Binding Path=Level, Converter={StaticResource levelToMarginConverter}}">
|
||||
<StackLayout.HeightRequest>
|
||||
<OnPlatform x:TypeArguments="x:Double">
|
||||
<On Platform="iOS" Value="44"></On>
|
||||
|
@ -37,13 +37,13 @@ xmlns:telerikTreeView="clr-namespace:Telerik.XamarinForms.DataControls.TreeView;
|
|||
</OnPlatform>
|
||||
</StackLayout.HeightRequest>
|
||||
<telerikTreeView:ExpandCollapseIndicator FontSize="Medium"
|
||||
WidthRequest="10"
|
||||
Margin="15,0"
|
||||
VerticalTextAlignment="Center"
|
||||
IsLoading="{Binding Path=IsLoading}"
|
||||
IsLoadOnDemandEnabled="{Binding Path=IsLoadOnDemandEnabled}"
|
||||
IsExpanded="{Binding Path=IsExpanded}"
|
||||
IsLeaf="{Binding Path=IsLeaf}">
|
||||
WidthRequest="10"
|
||||
Margin="15,0"
|
||||
VerticalTextAlignment="Center"
|
||||
IsLoading="{Binding Path=IsLoading}"
|
||||
IsLoadOnDemandEnabled="{Binding Path=IsLoadOnDemandEnabled}"
|
||||
IsExpanded="{Binding Path=IsExpanded}"
|
||||
IsLeaf="{Binding Path=IsLeaf}">
|
||||
<AutomationProperties.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="RadTreeView"></On>
|
||||
|
@ -51,8 +51,8 @@ xmlns:telerikTreeView="clr-namespace:Telerik.XamarinForms.DataControls.TreeView;
|
|||
</AutomationProperties.HelpText>
|
||||
</telerikTreeView:ExpandCollapseIndicator>
|
||||
<telerikPrimitives:RadCheckBox IsChecked="{Binding Path=IsChecked, Mode=TwoWay}"
|
||||
IsVisible="{Binding Path=IsCheckBoxVisible}"
|
||||
VerticalOptions="Center">
|
||||
IsVisible="{Binding Path=IsCheckBoxVisible}"
|
||||
VerticalOptions="Center">
|
||||
<AutomationProperties.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="RadTreeView"></On>
|
||||
|
@ -60,7 +60,7 @@ xmlns:telerikTreeView="clr-namespace:Telerik.XamarinForms.DataControls.TreeView;
|
|||
</AutomationProperties.HelpText>
|
||||
</telerikPrimitives:RadCheckBox>
|
||||
<telerikTreeView:ItemText Text="{Binding Path=Header}"
|
||||
VerticalTextAlignment="Center">
|
||||
VerticalTextAlignment="Center">
|
||||
<AutomationProperties.HelpText>
|
||||
<OnPlatform x:TypeArguments="x:String">
|
||||
<On Platform="iOS" Value="RadTreeView"></On>
|
||||
|
|
Загрузка…
Ссылка в новой задаче