I have a TabControl which is bound to ViewModel. I want to set the margin of the auto generated TabPanel, but I am unable to do so, because I think the style is set inline via TabControl's implementation...
Here is my style...
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="Margin" Value="14,0,0,0" />
</Style>
</TabControl.Resources>
and the resulting style using Visual Studio's Live Property Explorer is like this...
UPDATE 1:
Here is the XAML for ItemTemplate that generates the TabPanel itself:
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Source="{Binding ImageUri}"
Height="25" Width="35" Margin="0,0,0,10" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding TestName}" TextAlignment="Center"
TextWrapping="Wrap" FontFamily="Open Sans" FontWeight="Regular" FontSize="14" />
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
You need to override the TabControl template to customize the appearance. In this case you will be responsible for designing template, but also will be able to customize it in a way you like.
Example template is taken from MSDN
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="" Width="500" Height="500">
<Window.Resources>
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFAAAAAA" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="14,0,4,0"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ContentAreaColorLight}" Offset="0" />
<GradientStop Color="{DynamicResource ContentAreaColorDark}" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl ItemsSource="{Binding Path=Items}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="150" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding .}" TextAlignment="Center"
TextWrapping="Wrap" FontFamily="Open Sans" FontWeight="Regular" FontSize="14" />
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Related
In the ControlTemplate of a control I'm defining the ControlTemplate of another control, I want to get a reference to the ListBox lstBx from the outer ControlTemplate ,
neither: Storyboard.TargetName="lstBx" work, nor this:
Storyboard.Target="{Binding ElementName=lstBx, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}"
here's a simplified version of my code
<ControlTemplate TargetType="{x:Type ContentControl}" x:Name="cont">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Border Canvas.ZIndex="1" CornerRadius="4" BorderThickness="1" BorderBrush="Black" Background="{StaticResource btn3d}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32" />
<ColumnDefinition Width="1" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<ToggleButton Padding="30, 10">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="lstBx" Storyboard.TargetProperty="Height" From="0" To="60" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<StackPanel Grid.Column="2" />
</Grid>
</Border>
<ListBox Name="lstBx" Height="0" Grid.Row="1" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}" />
</Grid>
</ControlTemplate>
Though there is no way to perform such binding, you can use some proxy instead.
For example, you can bind to ToggleButton's Tag property:
<ControlTemplate TargetType="{x:Type ContentControl}" x:Name="cont">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Border Canvas.ZIndex="1" CornerRadius="4" BorderThickness="1" BorderBrush="Black" Background="{StaticResource btn3d}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32" />
<ColumnDefinition Width="1" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<ToggleButton Name="toggleButton" Padding="30, 10">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Tag" From="0" To="60" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<StackPanel Grid.Column="2" />
</Grid>
</Border>
<ListBox Name="lstBx" Height="{Binding ElementName="toggleButton" Grid.Row="1" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}" />
</Grid>
</ControlTemplate>
I have a 3 row definitions on my grid:
<Grid.RowDefinitions>
<RowDefinition Height=".1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
How can I make this look like this:
As you can see my rows are separated by lines , how is that?
Thanks
You Can Use borders like this --
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height=".1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="1" BorderBrush="Gray" VerticalAlignment="Bottom"/>
<!-- Your Contents -->
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Gray" VerticalAlignment="Bottom"/>
</Grid>
Output
Update
Using Only border may not look good so you need to use drop shadow using community toolkit but it requires you to use min 10.0.15063 so here is custom drop shadow effect better than community toolkit with thin corners and don't forget to adjust border shadow thickness in style according to your requirement currently i used "2", increase it if you want---
<Page.Resources>
<Style x:Key="DownwardDropShadow" TargetType="Border">
<Setter Property="CornerRadius" Value="100" />
<Setter Property="BorderThickness" Value="0,0,0,2" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="1" />
<GradientStop Color="#ddd" Offset="0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="UpwardDropShadow" TargetType="Border">
<Setter Property="CornerRadius" Value="100" />
<Setter Property="BorderThickness" Value="0,2,0,0" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="1" />
<GradientStop Color="#ddd" Offset="0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height=".1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Style="{StaticResource DownwardDropShadow}" BorderThickness="1.5" Opacity="0.9" BorderBrush="#ddd" VerticalAlignment="Bottom" Background="#FFC8D5DD" />
<!-- Your Contents -->
<Border Grid.Row="1" Style="{StaticResource UpwardDropShadow}" BorderThickness="1.5" Opacity="0.9" BorderBrush="#ccc" VerticalAlignment="Bottom"/>
</Grid>
Output
I put an ContentDialog in my project to use for Login Popup on Windows 10.
When I run this project on mobile, ContentDialog not shown in full screen and have a minimal padding around this element.On keyboard is visible (on focus element textbox for example) exist margin between keyboard and content dialog
Have any solution to how this on FullScreen? I set the property "FullSizeDesired" true, mas the problem is the same?
Someone help to remove this: - Padding, - Full Screen
My code are:
<ContentDialog
x:Class="ExampleApp.SignInContentDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ExampleApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="SIGN IN">
<Grid x:Name="GridMobile" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegister"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
</Grid>
The margin/space have in button of page is reserved for the "PrimaryButton" and "SecondaryButton" I think
but I need more buttons and this margin/space is not appropriated for me. I want to remove this.
Thanks.
The reason that you see the gaps in between is not because of any specific Padding values but because in ContentDialog's default style, the height and width are set to Auto which means your content will only be given the size it needs to.
So make the content stretch to fit its parent, you just need to override the default style by applying your own default style of the local:SignInContentDialog and put it inside your App.xaml.
<Style TargetType="local:SignInContentDialog">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:SignInContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- COMMENT OUT THESE FOLLOWING LINES -->
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>-->
<Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" MaxWidth="{TemplateBinding MaxWidth}" MaxHeight="{TemplateBinding MaxHeight}" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}">
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title" Margin="{ThemeResource ContentDialogTitleMargin}" Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}" FontSize="20" FontFamily="Segoe UI" FontWeight="Normal" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Left" VerticalAlignment="Top" IsTabStop="False" MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}" MaxLines="2" TextWrapping="Wrap" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" FontSize="{ThemeResource ControlContentThemeFontSize}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" Margin="{ThemeResource ContentDialogContentMargin}" Foreground="{TemplateBinding Foreground}" Grid.Row="1" TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host" Margin="{ThemeResource ContentDialogButton1HostMargin}" MinWidth="{ThemeResource ContentDialogButtonMinWidth}" MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}" Height="{ThemeResource ContentDialogButtonHeight}" HorizontalAlignment="Stretch" />
<Border x:Name="Button2Host" Margin="{ThemeResource ContentDialogButton2HostMargin}" MinWidth="{ThemeResource ContentDialogButtonMinWidth}" MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}" Height="{ThemeResource ContentDialogButtonHeight}" Grid.Column="1" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this below is a chat window. the font size is not setup where to put this? for the chat text we do have font size for the send button
MinHeight="550" MinWidth="834"
Closed="Window_Closed" >
<Window.Resources>
<Style x:Key="SpeechOptionsStyle" TargetType="RadioButton">
<Setter Property="Margin" Value="2,8,0,0" />
</Style>
<Style x:Key="ChatButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Height" Value="23" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Width" Value="150" />
<Setter Property="Margin" Value="0,5,0,0" />
</Style>
</Window.Resources>
<Grid>
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="LightSlateGray" Offset="0"/>
<GradientStop Color="Gainsboro" Offset="0.7"/>
<GradientStop Color="LightSlateGray" Offset="0.95"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="170" />
</Grid.ColumnDefinitions>
<ListBox Grid.Row="1" Grid.Column="0" x:Name="chatListBoxMsgs" Margin="10"
HorizontalContentAlignment="Stretch" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}" >
<EventSetter Event="MouseDoubleClick"
Handler="chatListBoxMsgs_MouseDoubleClick" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<Grid Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="10"
Width="150">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" x:Name="chatListBoxNames" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="150" />
<StackPanel Grid.Row="1" Margin="0,10,0,0"> <CheckBox Visibility="Hidden" x:Name="chatCheckBoxWhisper" Height="17" HorizontalAlignment="Left" Foreground="Black" FontSize="12" >Whisper Mode</CheckBox>
</StackPanel>
</Grid>
<TextBlock Visibility="Visible" Grid.Row="2" Grid.Column="0" x:Name="chatLabelWritingMsg"
Height="45" VerticalAlignment="Top" Foreground="MediumBlue"
TextWrapping="Wrap" Margin="10,0,0,0">Status</TextBlock>
<StackPanel Grid.Row="2" Grid.Column="1" Grid.RowSpan="2"
Orientation="Vertical" Margin="10,0" >
<Button x:Name="chatButtonConnect" Click="chatButtonConnect_Click"
Style="{StaticResource ChatButtonStyle}" >Connect</Button>
<Button x:Name="chatButtonDisconnect" Click="chatButtonDisconnect_Click"
Style="{StaticResource ChatButtonStyle}" >Disconnect</Button>
</StackPanel>
<Grid Grid.Row="3" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" x:Name="chatTxtBoxType" Height="60"
VerticalAlignment="Top" Margin="10,0,5,5" TextWrapping="Wrap"
SpellCheck.IsEnabled="True" />
<Button Grid.Column="1" x:Name="chatButtonSend"
Click="chatButtonSend_Click" Height="60" VerticalAlignment="Top"
HorizontalAlignment="Right" Width="50" Margin="5,0,5,5"
FontSize="14">Send</Button>
</Grid>
</Grid>
</Window>
we have here the fontsize for the send button where do we put font ssize for the chat text it is defaulting to 8
From your code I think you want to set the font size of chatTxtBoxType. You can do it right in there (using an example size of 14):
<TextBox Grid.Column="0" x:Name="chatTxtBoxType" Height="60"
VerticalAlignment="Top" Margin="10,0,5,5" TextWrapping="Wrap"
SpellCheck.IsEnabled="True" FontSize="14"/>
Or using a style, like how you did for buttons (in that case, you might want to move some other properties to the style):
<Window.Resources>
<Style x:Key="ChatBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="14" />
</Style>
...
<TextBox Grid.Column="0" x:Name="chatTxtBoxType" Height="60"
VerticalAlignment="Top" Margin="10,0,5,5" TextWrapping="Wrap"
SpellCheck.IsEnabled="True" Style="{StaticResource ChatBoxStyle}"/>
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.