UWP databinding in an inherited control

UWP databinding in an inherited control - c#

I have a custom textbox control which I inherit from default TextBox. And on style I have added some additional xaml, one of which is this progress ring:
<toolkit:Loading x:Name="IsBusyLoader"
Grid.Column="1"
Grid.ColumnSpan="2"
Style="{StaticResource DefaultLoader}">
<ProgressRing Style="{StaticResource SmallRing}" />
</toolkit:Loading>
and I have to control its "IsLoading" with binding from where the control is being used. For that I created its binding in code behind of this control because it's a style so I wasn't sure how I can create that binding in xaml style with a dependency property.
public FluentTextBox() => DefaultStyleKey = typeof(FluentTextBox);
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
//GetTemplateChild
_isBusyLoader = GetTemplateChild("IsBusyLoader") as Loading;
//bindings
_isBusyLoader.SetBinding(Microsoft.Toolkit.Uwp.UI.Controls.Loading.IsLoadingProperty, new Binding { Mode = BindingMode.OneWay, Source = IsBusy });
}
public bool IsBusy
{
get => (bool) GetValue(IsBusyProperty);
set => SetValue(IsBusyProperty, value);
}
public static readonly DependencyProperty IsBusyProperty =
DependencyProperty.Register("IsBusy", typeof(bool), typeof(FluentTextBox), new PropertyMetadata(null));
As you can see IsBusy is a dependency property. And I am binding to it on UI here I am using this custom textbox.
<controls1:FluentTextBox
Margin="4"
Header="Field 1"
IsBusy="{x:Bind IsBusy, Mode=OneWay}" />
Now IsBusy property here is actually in code behind the issue is when I update the IsBusy property from code behind, it doesn't reflect in UI. But I've used same IsBusy property somewhere else on that page and it properly raises notifications to UI there so I am clear that part is working fine.
public bool IsBusy // code behind is busy property on my xaml page.
{
get => _isBusy;
set
{
_isBusy = value;
RaisePropertyChanged(nameof(IsBusy));
}
}
Note that when I create the binding and set it to "true" in source then my custom textbox shows that progress ring as expected. I have also tried setting the source in binding to IsBusyProperty but that doesn't work either.
_isBusyLoader.SetBinding(Microsoft.Toolkit.Uwp.UI.Controls.Loading.IsLoadingProperty, new Binding { Mode = BindingMode.OneWay, Source = true });
Update 1
Full Style code
<Style TargetType="controls:FluentTextBox">
<Setter Property="Margin" Value="{ThemeResource DefaultControlMargin}" />
<Setter Property="local:TextBoxProperties.Initialized" Value="true" />
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
<Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
<Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
<Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource InputControlFontSize}" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="HorizontalAlignment" Value="{ThemeResource DefaultControlHorizontalAlignment}" />
<Setter Property="VerticalAlignment" Value="{ThemeResource DefaultControlVerticalAlignment}" />
<Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
<Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:FluentTextBox">
<Grid>
<Grid.Resources>
<!--default delete button style here-->
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="PointerEntered">
<ic:CallMethodAction MethodName="StartAnimation" TargetObject="{Binding ElementName=MoreActionGridFadeIn}" />
</ic:EventTriggerBehavior>
<ic:EventTriggerBehavior EventName="PointerExited">
<ic:CallMethodAction MethodName="StartAnimation" TargetObject="{Binding ElementName=MoreActionGridFadeOut}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Border
x:Name="BorderElement"
Grid.Row="0"
Grid.RowSpan="3"
Grid.ColumnSpan="2"
MinWidth="{ThemeResource TextControlThemeMinWidth}"
MinHeight="{ThemeResource TextControlThemeMinHeight}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True"
CornerRadius="{TemplateBinding CornerRadius}" />
<Border
x:Name="ValidationBorder"
Grid.Row="0"
Grid.RowSpan="3"
Grid.ColumnSpan="2"
MinWidth="{ThemeResource TextControlThemeMinWidth}"
MinHeight="{ThemeResource TextControlThemeMinHeight}"
BorderBrush="{ThemeResource ValidationBorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
<ContentPresenter
x:Name="ShadowHeaderContentPresenter"
Padding="10,0,2,0"
Background="{x:Null}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontSize="{TemplateBinding FontSize}"
FontWeight="Normal"
Foreground="{x:Null}"
Opacity="0"
TextWrapping="NoWrap"
Visibility="Visible" />
<ContentPresenter
x:Name="HeaderContentPresenter"
Padding="10,0,2,0"
x:DeferLoadStrategy="Lazy"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontSize="{TemplateBinding FontSize}"
FontWeight="Normal"
Foreground="{Binding ElementName=PlaceholderTextContentPresenter, Path=Foreground, Mode=OneWay}"
TextWrapping="NoWrap"
Visibility="Collapsed">
<ContentPresenter.RenderTransform>
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<ScrollViewer
x:Name="ContentElement"
Grid.Row="1"
Margin="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsTabStop="False"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="Disabled" />
<TextBlock
x:Name="PlaceholderTextContentPresenter"
Grid.Row="1"
Grid.ColumnSpan="2"
Margin="{TemplateBinding BorderThickness}"
Padding="10,0,0,0"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
IsHitTestVisible="False"
Text="{TemplateBinding PlaceholderText}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}" />
<Grid Grid.RowSpan="3" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button
x:Name="DeleteButton"
MinWidth="{ThemeResource DeleteButtonMinWidth}"
MaxWidth="{ThemeResource DeleteButtonMaxWidth}"
Margin="{ThemeResource HelperButtonThemePadding}"
VerticalAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw"
BorderThickness="{TemplateBinding BorderThickness}"
FontSize="{TemplateBinding FontSize}"
IsTabStop="False"
Style="{StaticResource DeleteButtonStyle}"
Visibility="Collapsed" />
<Grid x:Name="ActionGrid" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<Grid>
<Grid x:Name="MoreGrid" Opacity="0">
<i:Interaction.Behaviors>
<ToolkitBehaviors:Fade
x:Name="MoreActionGridFadeIn"
AutomaticallyStart="False"
Delay="0"
EasingMode="EaseOut"
EasingType="Cubic"
Value="1"
Duration="300" />
<ToolkitBehaviors:Fade
x:Name="MoreActionGridFadeOut"
AutomaticallyStart="False"
Delay="0"
EasingMode="EaseOut"
EasingType="Cubic"
Value="0"
Duration="300" />
</i:Interaction.Behaviors>
<AppBarButton
x:Name="CopyButton"
Width="48"
Height="48"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Icon="Copy"
ToolTipService.ToolTip="Copy" />
</Grid>
</Grid>
<Grid Grid.Column="1">
<toolkit:DropShadowPanel
Width="24"
Height="24"
Margin="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource GridShadowSmall}"
Color="Black">
<Ellipse
Width="24"
Height="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{TemplateBinding BorderBrush}" />
</toolkit:DropShadowPanel>
<Ellipse
x:Name="CentralElipse"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.ZIndex="10">
<ToolTipService.ToolTip>
<ToolTip>
<Grid Width="140" MaxHeight="200">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
x:Name="MemosCountBlock"
Grid.Row="1"
Margin="4"
FontWeight="SemiBold"
TextTrimming="CharacterEllipsis"
TextWrapping="Wrap" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Margin="4"
Text="Memos"
TextTrimming="CharacterEllipsis"
TextWrapping="WrapWholeWords" />
<TextBlock
x:Name="MyFirstMemoBlock"
Grid.ColumnSpan="2"
Margin="4"
TextTrimming="CharacterEllipsis"
TextWrapping="WrapWholeWords" />
</Grid>
</ToolTip>
</ToolTipService.ToolTip>
<FlyoutBase.AttachedFlyout>
<Flyout x:Name="MemosFlyout" FlyoutPresenterStyle="{StaticResource NoPaddingFlyoutPresenter}">
<local1:MemosControl
x:Name="MyMemosControl"
Width="320"
MaxHeight="440"
Padding="0,8,0,0"
NewMemoButtonVisible="True" />
</Flyout>
</FlyoutBase.AttachedFlyout>
</Ellipse>
</Grid>
<toolkit:Loading
x:Name="IsBusyLoader"
Grid.ColumnSpan="2"
Style="{StaticResource DefaultLoader}">
<ProgressRing Style="{StaticResource SmallRing}" />
</toolkit:Loading>
</Grid>
</Grid>
<ContentPresenter
x:Name="DescriptionPresenter"
Grid.Row="2"
Padding="10,0,4,4"
x:Load="False"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Description}"
FontSize="{StaticResource InputControlHeaderFontSize}"
Foreground="{Binding ElementName=PlaceholderTextContentPresenter, Path=Foreground, Mode=OneWay}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<!-- default disabled state -->
</VisualState>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<!-- default pointer over state -->
</VisualState>
<VisualState x:Name="Focused">
<!-- default focused state -->
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonStates">
<VisualState x:Name="ButtonVisible">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ButtonCollapsed" />
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseInOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NotEmpty">
<VisualState.Setters>
<Setter Target="HeaderContentPresenter.(FontSize)" Value="{StaticResource InputControlHeaderFontSize}" />
</VisualState.Setters>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding Text, Converter={StaticResource IsNotEmptyConverter}, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="Empty">
<VisualState.Setters>
<Setter Target="HeaderContentPresenter.(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Value="16" />
<Setter Target="PlaceholderTextContentPresenter.(Opacity)" Value="0" />
</VisualState.Setters>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding Text, Converter={StaticResource IsEmptyConverter}, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseInOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Valid" />
<VisualState x:Name="NotValid">
<VisualState.Setters>
<Setter Target="ValidationBorder.(BorderThickness)" Value="{ThemeResource ValidationBorderThickness}" />
</VisualState.Setters>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding (local:Validation.HasError), Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Instead of overriding OnApplyTemplate(), you should be able to bind directly to the IsBusy property in your ControlTemplate:
<toolkit:Loading x:Name="IsBusyLoader" IsLoading="{x:Bind IsBusy, Mode=TwoWay}" ... />
Note that you should set the Mode property since the default mode of compiled (x:Bind) bindings is OneTime.
You should also specify a valid default valuu when you register the dependency property:
public static readonly DependencyProperty IsBusyProperty =
DependencyProperty.Register(nameof(IsBusy), typeof(bool), typeof(FluentTextBox),
new PropertyMetadata(false));

Related

how to set ColorPickerSlider element, ColorChannel Property in UWP?

I Don't know,how to set colorChannel property of ColorPickerSlider dynamically in c#.I need ColorPickerSlider like the picture i added,based on color choosen from colorSpectrum.I don't Want to use ColorPicker Element.I need this as Separate Component.
ColorSpectrum ColorSpectrum = new ColorSpectrum();
ColorPickerSlider ColorPickerSlider = new ColorPickerSlider();
ColorPickerSlider.ColorChannel=???????;

In terms of style, we can consider a combined approach:
Rectangle + ColorPickerSlider
Use Rectangle as the background and ColorPickerSlider as the actual function slider.
<Grid Width="300" Height="40">
<Rectangle Height="15" VerticalAlignment="Center" Width="300" x:Name="BackgroundRect"/>
<ColorPickerSlider ColorChannel="Hue" Style="{StaticResource ColorPickerSliderStyle}"/>
</Grid>
Modify Rectangle background color
var stopCollection = new GradientStopCollection();
stopCollection.Add(new GradientStop() { Color = Colors.Black, Offset=0 });
stopCollection.Add(new GradientStop() { Color = Colors.Purple, Offset=1 });
var brush = new LinearGradientBrush(stopCollection,0);
BackgroundRect.Fill = brush;
ColorPickerSliderStyle
<Style x:Key="ColorPickerSliderStyle" TargetType="ColorPickerSlider">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Grid.Resources>
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{ThemeResource ColorPickerSliderThumbBackground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="HeaderContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
<Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundDisabled}" />
<Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource ColorPickerSliderTrackFillDisabled}" />
<Setter Target="HorizontalDecreaseRect.Fill" Value="{ThemeResource ColorPickerSliderTrackFillDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundPointerOver}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusEngagementStates">
<VisualState x:Name="FocusDisengaged" />
<VisualState x:Name="FocusEngagedHorizontal">
<VisualState.Setters>
<Setter Target="SliderContainer.(Control.IsTemplateFocusTarget)" Value="False" />
<Setter Target="HorizontalThumb.(Control.IsTemplateFocusTarget)" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="FocusEngagedVertical">
<VisualState.Setters>
<Setter Target="SliderContainer.(Control.IsTemplateFocusTarget)" Value="False" />
<Setter Target="VerticalThumb.(Control.IsTemplateFocusTarget)" Value="True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource SliderHeaderForeground}" FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" Margin="{ThemeResource SliderHeaderThemeMargin}" TextWrapping="Wrap" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
<Grid x:Name="SliderContainer" Background="Transparent" Control.IsTemplateFocusTarget="True" Grid.Row="1">
<Grid x:Name="HorizontalTemplate" MinHeight="44">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18" />
<RowDefinition Height="Auto" />
<RowDefinition Height="18" />
</Grid.RowDefinitions>
<Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="Transparent" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Opacity="0" />
<Rectangle x:Name="HorizontalDecreaseRect" Fill="Transparent" Grid.Row="1" Opacity="0" />
<Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" DataContext="{TemplateBinding Value}" Height="24" Grid.Row="0" Grid.RowSpan="3" Style="{StaticResource SliderThumbStyle}" Width="8">
<ToolTipService.ToolTip>
<ToolTip x:Name="ToolTip" VerticalOffset="20" />
</ToolTipService.ToolTip>
</Thumb>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update
About calculating gradient color
We have two colors: black and purple:
Black (RGB) : 0 0 0
Purple (RGB): 128 0 128
Let ’s assume that the Thumb of ColorPickerSlider is in the middle, with a value of 50 (the maximum value of Slider is 100)
So we can get the middle color as (RGB) 64 0 64

Cannot get button working inside HubSection HeaderTemplate

I have a Hubsection with a Textblock and a button in HeaderTemplate. It works ok in Windows 8, but I've migrated the app to UWP and now I can not click the button.
<HubSection
Width="480"
HorizontalAlignment="Stretch"
Header="_XX"
IsHeaderInteractive="True">
<HubSection.HeaderTemplate>
<DataTemplate>
<Grid Width="392" Margin="0,-10,0,-10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="28"
Text="{Binding}" />
<AppBarButton
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Command="{Binding ElementName=HubSection, Path=DataContext.MyCommand}">
<AppBarButton.Icon>
<FontIcon
FontFamily="{StaticResource IconsFontFamily}"
FontSize="26"
Glyph="" />
</AppBarButton.Icon>
</AppBarButton>
</Grid>
</DataTemplate>
</HubSection.HeaderTemplate>
<DataTemplate>
...
</DataTemplate>
Help will be appreciated, thanks in advance.

The issue comes from the way the header is defined. The header is already a button and with your template, you are adding a button within a button.
One solution to solve this is to duplicate the Hub template and replace the Button control used to host the header by a ContentControl:
<Page.Resources>
<Style TargetType="HubSection">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Padding" Value="12,10,12,0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HubSection">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border.Resources>
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
<Grid x:Name="ButtonRoot" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ImitatedTextBlock">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderForeground}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="Center"
OpticalMarginAlignment="TrimSideBearings" />
</Grid>
</ControlTemplate>
</Border.Resources>
<Grid Margin="{TemplateBinding Padding}" HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- The change is here -->
<ContentControl x:Name="HeaderButton"
Grid.Row="1"
Grid.Column="0"
UseSystemFocusVisuals="True"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
Margin="{ThemeResource HubSectionHeaderThemeMargin}"
FontSize="{ThemeResource HubSectionHeaderThemeFontSize}"
FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Bottom"
IsTabStop="False" />
<Button x:Name="SeeMoreButton"
Grid.Row="1"
Grid.Column="1"
UseSystemFocusVisuals="True"
Visibility="Collapsed"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
Margin="{ThemeResource HubSectionHeaderSeeMoreThemeMargin}"
Template="{StaticResource HeaderButtonTemplate}"
FontSize="{ThemeResource HubSectionHeaderSeeMoreThemeFontSize}"
FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" />
</Grid>
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Grid.Row="2" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>

WPF Add new dependency property in Calendar

I need help in creating a new dependency property, functionality is the same as SelectedDates.
The logic works: using SelectedDates select days, pressing the top button "Set" to add a new property value from SelectedDates, set another color and write values into a text document.
Also, it should be possible to read from a text document these dates. When you run the program set the date 05.13.2015, 05.14.2015, 05.15.2015 should already be highlighted.
I need to create a new dependency property with the help of which you can select a different color to highlight the date and write a text file. As the functionality is the same as SelectedDates.
(Sorry for my bad english)
http://s57.radikal.ru/i155/1505/a4/7d10f56aa52e.png
Style:
<ResourceDictionary
xmlns:local="clr-namespace:CustomCalendar"
xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
xmlns:primitives="clr- namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"
xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit">
<!--CalendarItem-->
<Style x:Key="CalendarItemStyle" TargetType="primitives:CalendarItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarItem">
<ControlTemplate.Resources>
<!-- Start: Data template for header button -->
<DataTemplate x:Key="DayTitleTemplate">
<Grid>
<TextBlock FontWeight="Normal" FontFamily="Arial" FontSize="13.4" Foreground="#FF063B83" HorizontalAlignment="Center" Text="{Binding}" Margin="0,3,0,3" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
<!-- End: Data template for header button -->
</ControlTemplate.Resources>
<Grid Name="PART_Root">
<Grid.Resources>
<SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF" />
</Grid.Resources>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border BorderBrush="#d3dadb" BorderThickness="3" Background="{TemplateBinding Background}" CornerRadius="3">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<!-- Start: Previous button template -->
<ControlTemplate x:Key="PreviousButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Margin="4,0,0,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Fill" Data="M288.75,232.25 L283,236.625 L288.75,240.625" StrokeThickness="2">
<Path.Stroke>
<SolidColorBrush x:Name="TextColor" Color="#FF063B83" />
</Path.Stroke>
</Path>
<Path x:Name="TextColor2" Margin="4,0,0,0" Height="10" Width="12" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Fill" Data="M283,236.625 L297,236.625" Stroke="#FF063B83" StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
<!-- End: Previous button template -->
<!-- Start: Next button template -->
<ControlTemplate x:Key="NextButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Margin="0,0,4,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Right" Stretch="Fill" Data="M283,232.25 L288.75,236.625 L283,240.625" StrokeThickness="2">
<Path.Stroke>
<SolidColorBrush x:Name="TextColor" Color="#FF063B83" />
</Path.Stroke>
</Path>
<Path Margin="4,0,0,0" Height="10" Width="12" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Fill" Data="M283,236.625 L297,236.625" Stroke="#FF063B83" StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
<!-- End: Next button template -->
<!-- Start: Header button template -->
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="buttonContent" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextElement.Foreground>
<SolidColorBrush x:Name="TextColor" Color="#FF063B83"/>
</TextElement.Foreground>
</ContentPresenter>
</Grid>
</ControlTemplate>
<!-- End: Header button template -->
</Grid.Resources>
<Rectangle Fill="#FFEDEDED" Grid.ColumnSpan="4" Height="35"/>
<!-- Start: Previous button content -->
<Button x:Name="PART_PreviousButton" Margin="4" Grid.Row="0" Grid.Column="0" Template="{StaticResource PreviousButtonTemplate}" Height="20" Width="20" HorizontalAlignment="Left" Focusable="False"/>
<!-- End: Previous button content -->
<!-- Start: Header button content -->
<Button x:Name="PART_HeaderButton" Grid.Row="0" Grid.ColumnSpan="3" Template="{StaticResource HeaderButtonTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17" Focusable="False" FontWeight="SemiBold" FontFamily="Arial" Foreground="#FF063B83"/>
<!-- End: Header button content -->
<!-- Start: Next button content -->
<Button x:Name="PART_NextButton" Margin="4" Grid.Row="0" Grid.Column="2" Height="20" Width="20" HorizontalAlignment="Right" Template="{StaticResource NextButtonTemplate}" Focusable="False"/>
<!-- End: Next button content -->
<!-- Start: Month Content Grid -->
<Grid x:Name="PART_MonthView" Grid.Row="1" Grid.ColumnSpan="4" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
<!-- End: Month Content Grid -->
<!-- End: Year Content Grid -->
<Grid x:Name="PART_YearView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Hidden">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
<!-- End: Year Content Grid -->
</Grid>
</Border>
</Border>
<Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Stretch="Fill" StrokeThickness="1" RadiusX="2" RadiusY="2" Stroke="{StaticResource DisabledColor}" Fill="{StaticResource DisabledColor}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
</Trigger>
<DataTrigger Value="Year">
<DataTrigger.Binding>
<Binding Path="DisplayMode">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor" AncestorType="{x:Type toolkit:Calendar}" />
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Value="Decade">
<DataTrigger.Binding>
<Binding Path="DisplayMode">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor" AncestorType="{x:Type toolkit:Calendar}" />
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--CalendarDayButton-->
<Style x:Key="CalendarDayButtonStyle" TargetType="primitives:CalendarDayButton">
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="MinWidth" Value="5"/>
<Setter Property="MinHeight" Value="5"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarDayButton">
<ControlTemplate.Resources>
<LinearGradientBrush x:Key="gradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF9FAFB" Offset="0"/>
<GradientStop Color="#FFE9E9E9" Offset="1"/>
</LinearGradientBrush>
</ControlTemplate.Resources>
<Grid>
<Rectangle x:Name="Background" Grid.Row="1" RadiusX="1" RadiusY="1" Fill="{StaticResource gradient}" />
<Border>
<ContentPresenter x:Name="NormalText" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Center">
</ContentPresenter>
</Border>
<Rectangle x:Name="Border" StrokeThickness="0.2" Grid.RowSpan="2" SnapsToDevicePixels="True">
<Rectangle.Stroke>
<SolidColorBrush x:Name="BorderBrush" Color="#FF5D8CC9"/>
</Rectangle.Stroke>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsToday" Value="True">
<Setter TargetName="Background" Property="Stroke" Value="#FF063B83"/>
<Setter Property="Foreground" Value="#FF063B83"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF5D8CC9"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Background" Property="Fill" Value="#bec9d7"/>
</Trigger>
<Trigger Property="IsInactive" Value="True">
<Setter TargetName="Background" Property="Fill" Value="White"/>
<Setter Property="Foreground" Value="#bdbdbd"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Background" Property="Fill" Value="Black"/>
<Setter Property="Foreground" Value="#bdbdbd"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Calendar-->
<Style TargetType="local:MyCalendar">
<Setter Property="CalendarItemStyle" Value="{StaticResource CalendarItemStyle}"/>
<Setter Property="CalendarDayButtonStyle" Value="{StaticResource CalendarDayButtonStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Calendar">
<Grid Name="PART_Root">
<primitives:CalendarItem Name="PART_CalendarItem" Style="{TemplateBinding CalendarItemStyle}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MyCalendar.cs
namespace CustomCalendar
{
public class MyCalendar : Calendar
{
static MyCalendar()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCalendar), new FrameworkPropertyMetadata(typeof(MyCalendar)));
}
}
}

HorizontalAlignment Issue

I am using Silverlight 5 and Telerik library.
I have set my RadPanelBar HorizontalAlignment to stretch. When my control is displayed the first time, it takes the size of its parent control. But the problem is, when my data grows horizontally, my panelbar grows with it!
Here goes my code, I have put all the controls to horizontalalignment to stretch, but no effect:
<UserControl.Resources>
<DataTemplate x:Key="ContentTemplate">
<ScrollViewer HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Top">
<ItemsControl x:Name="Test"
ItemsSource="{Binding Items}"
HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical"
Height="220"
HorizontalAlignment="Stretch">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:ParameterItem Style="{StaticResource ParamItem}"
Description="{Binding Code}"
ParamValue="{Binding Value}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadBusyIndicator IsBusy="{Binding IsLoading}">
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Height="28">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="/ISDN.NSS.UI.Themes;component/Images/HeaderBG.png" />
</Grid.Background>
<TextBlock Grid.Column="0" FontSize="13" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Arial" Margin="8,0,0,0" Text="Model Parameters"></TextBlock>
</Grid>
<telerik:RadPanelBar Grid.Row="1"
Margin="2"
ItemsSource="{Binding Parameters}"
HorizontalAlignment="Stretch"
>
<telerik:RadPanelBar.ItemTemplate>
<telerik:HierarchicalDataTemplate ItemTemplate="{StaticResource ContentTemplate}"
ItemsSource="{Binding RootItems}">
<TextBlock Text="{Binding Name}" FontSize="13" FontWeight="Bold" FontFamily="Arial"/>
</telerik:HierarchicalDataTemplate>
</telerik:RadPanelBar.ItemTemplate>
</telerik:RadPanelBar>
</Grid>
</telerik:RadBusyIndicator>
</Grid>
Can anyone help?

The problem is solved with the support of Telerik Team.
Here goes the code for the edited template of the RadPanelBar:
<telerik:Office_BlackTheme x:Key="Theme" />
<SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000" />
<Style x:Key="RadPanelBarStyle" TargetType="telerik:RadPanelBar">
<Setter Property="ExpandMode" Value="Single" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:PanelBarPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadPanelBar">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="Vertical">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="transformationRoot"
Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="0" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Horizontal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="transformationRoot"
Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="-90" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<telerik:LayoutTransformControl x:Name="transformationRoot">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<!-- <ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" Padding="{TemplateBinding Padding}" telerik:StyleManager.Theme="{StaticResource Theme}" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"> -->
<ItemsPresenter />
<!-- </ScrollViewer> -->
</Border>
</telerik:LayoutTransformControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="IsTabStop" Value="true" />
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
The default scrollviewer had to be removed from the RadPanelBar default style.

ScrollViewer Border (Windows Phone 7)

I have a ScrollViewer on my Windows Phone page.
I want to show expllicitly that there is a scrolling possibility. By default, the control itself doesn't show anything which can give a hint to the user that the space is scrollable.
Is it possible, for example, to always show the scroll bar on the right side? Again, by default it is shown only when the user wants and tries to scroll.

<ScrollViewer VerticalScrollBarVisibility="Visible"> not working in windows phone. I think you can change ControTemplate for ScrollViewer and make scroll bar visible.
Edited:
Is sample how you can change control template for ScrolViewer. I got it from msdn
<Style x:Key="LeftScrollViewer" TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="1"/>
<ScrollBar Name="PART_VerticalScrollBar"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<ScrollBar Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Grid.Row="1"
Grid.Column="1"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
apply this style to ScrolViewer
<ScrollViewer Grid.Column="1" Style="{StaticResource LeftScrollViewer}">
this sample will not work in Windows Phone because this ScrollViewer ControlTemplate from descktop wpf. But you can use Expression Blend and get Windows Phone ScrolViewer ControlTemplate and change something like
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
on Visibility="Visible"

You can replace the default ScrollViewer template with one that always shows the scrollbar. Note that this isn't consistent with the windows phone design guidelines and you should think carefully before choosing to always display a scrollbar.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="1" Orientation="Vertical" Visibility="Visible" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5"/>
<ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<ScrollViewer Style="{StaticResource ScrollViewerStyle1}">

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

UWP databinding in an inherited control - c#

Related

how to set ColorPickerSlider element, ColorChannel Property in UWP?

Cannot get button working inside HubSection HeaderTemplate

WPF Add new dependency property in Calendar

HorizontalAlignment Issue

ScrollViewer Border (Windows Phone 7)

Categories

Resources