So I have an application that has pages of Buttons. Each page can have up to 100 buttons on it and the User can navigate from page to page. The problem is that each Button calls a number of Converters, the more Buttons on a Page, the longer it takes to switch from one page to another....
I have isolated the problem to the number of Converters (on each Button) commenting out the code in the converters doesn't make any difference so it's not that.....
In the App.xaml defines 'POSButtonContent' defines and 'POSButton' Style
<DataTemplate po:Freeze="True" x:Key="POSButtonContent">
<LocalItemCount:AdornedControl
HorizontalAdornerPlacement="Outside" VerticalAdornerPlacement="Outside"
IsAdornerVisible="{Binding First_Product.Local_Item_Count, Converter={Converters:ShowLocalItemCount}}" AdornerOffsetX="17" AdornerOffsetY="15">
<Button x:Name="POSButton" Style="{StaticResource POS_Button}" >
<Button.IsEnabled>
<MultiBinding Converter="{Converters:DisablePOSButtonConverter}">
<MultiBinding.Bindings>
<Binding />
<Binding Path="DataContext.First_Product.Local_Item_Count" ElementName="POSButton" />
<Binding Path="DataContext.SetLocalStockAvailability" ElementName="Base" />
</MultiBinding.Bindings>
</MultiBinding>
</Button.IsEnabled>
</Button>
<LocalItemCount:AdornedControl.AdornerContent>
<StackPanel HorizontalAlignment="Left">
<Border Background="Green" CornerRadius="2" Width="auto" BorderThickness="1" BorderBrush="Black">
<Label MinWidth="15" Content="{Binding First_Product.Local_Item_Count}" Padding="0.5" FontSize="12" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{Converters:ShowLocalItemCountWarning}">
<Binding Path="First_Product.Local_Item_Count"/>
<Binding Path="First_Product.Min_Local_Item_Count"/>
</MultiBinding>
</DataTrigger.Binding>
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="LocalItemCountStoryboard">
<Storyboard FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="0:0:1"
FillBehavior="HoldEnd"
RepeatBehavior="Forever">
<DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Green"/>
<DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="LocalItemCountStoryboard"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</StackPanel>
</LocalItemCount:AdornedControl.AdornerContent>
</LocalItemCount:AdornedControl>
</DataTemplate>
<Style x:Key="POS_Button" po:Freeze="True" TargetType="{x:Type Button}" x:Name="POSButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate po:Freeze="True" TargetType="{x:Type Button}">
<Button FontSize="{Binding POS_Button_Style.FontSize}" HorizontalContentAlignment="Center" Padding="2" Foreground="{Binding POS_Button_Style.Foreground}" FontFamily="{Binding POS_Button_Style.TypeFace}" Style="{StaticResource Default}" Command="{Binding DataContext.ButtonCommand, ElementName=Base}" CommandParameter="{Binding}" Margin="3" >
<StackPanel>
<Grid>
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox Grid.Row="1" Margin="10" Visibility="{Binding DataContext.ShowButtonText, ElementName=Base}" MaxWidth="{Binding ActualHeight, ElementName=POSButton}" MaxHeight="{Binding ActualHeight, ElementName=POSButton}" x:Name="vb1">
<Image x:Name="ButtonImage" Grid.Row="1" Margin="0"
Source="{Binding ImagePath, TargetNullValue={x:Null}}"
RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" VerticalAlignment="Center"
Stretch="Fill" />
</Viewbox>
<Label Padding="0" HorizontalAlignment="Left" VerticalContentAlignment="Center" Background="Transparent" FontSize="{Binding FontSize, ElementName=displayname}" FontFamily="{Binding FontFamily, ElementName=displayname}" Foreground="{Binding Foreground, ElementName=displayname}" Content="{Binding DataContext.KeyboardBuffer, ElementName=Base}" Grid.Row="1" >
<Label.Visibility>
<MultiBinding Converter="{Converters:KBBufferTextVisibilityConverter}" >
<Binding Path="Source" ElementName="ButtonImage" />
<Binding Path="DataContext.ShowButtonText" ElementName="Base"/>
<Binding Path="LNK_ButtonLinks"/>
</MultiBinding>
</Label.Visibility>
</Label>
<TextBlock x:Name="displayname" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Text="{Binding DisplayName}" >
<TextBlock.Visibility>
<MultiBinding Converter="{Converters:ButtonTextVisibilityConverter}" >
<Binding Path="Source" ElementName="ButtonImage" />
<Binding Path="DataContext.ShowButtonText" ElementName="Base"/>
<Binding Path="LNK_ButtonLinks"/>
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
</Grid>
<Thumb Visibility="{Binding DataContext.ResizeButtons, ElementName=Base}" VerticalAlignment="Bottom" Margin="0,0,0,0"
DragDelta="OnResizeThumbDragDelta"
DragStarted="OnResizeThumbDragStarted"
DragCompleted="OnResizeThumbDragCompleted">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="resizeVisual" DockPanel.Dock="Right" VerticalAlignment="Bottom">
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="SizeNWSE"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Canvas Background="White" Width="35" Height="35">
<Path Width="35" Height="35" Stretch="Fill" Fill="#FF000000" Data="F1 M 30.25,58L 18,58L 18,45.75L 22,41.75L 22,50.75L 30,42.75L 33.25,46L 25.25,54L 34.25,54L 30.25,58 Z M 58,45.75L 58,58L 45.75,58L 41.75,54L 50.75,54L 42.75,46L 46,42.75L 54,50.75L 54,41.75L 58,45.75 Z M 45.75,18L 58,18L 58,30.25L 54,34.25L 54,25.25L 46,33.25L 42.75,30L 50.75,22L 41.75,22L 45.75,18 Z M 18,30.25L 18,18L 30.25,18L 34.25,22L 25.25,22L 33.25,30L 30,33.25L 22,25.25L 22,34.25L 18,30.25 Z "/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</StackPanel>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then in the View..... is a Grid with a Button in each cell (at ContentPresenter)
<Grid RenderOptions.CachingHint="Cache">
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Button Width="1" Height="1" Command="{Binding DataContext.DecoyButtonPress, ElementName=Base}" CommandParameter="Decoy Button Pressed" AttachedProperties:FocusExtension.IsFocused="{Binding DataContext.FocusDecoy, ElementName=Base}" ></Button>
<ItemsControl ItemsSource="{Binding Buttons}" VirtualizingPanel.VirtualizationMode="Recycling"
VirtualizingPanel.IsVirtualizing="True"
ScrollViewer.CanContentScroll="True">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<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="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding DataContext.IsViewSelected, ElementName=ContentMenu_ViewUI}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="SelectedViewStoryboard">
<Storyboard FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
Duration="0:0:2"
FillBehavior="HoldEnd"
RepeatBehavior="Forever">
<DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red"/>
<DiscreteColorKeyFrame KeyTime="0:0:1" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="SelectedViewStoryboard"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding Column}" />
<Setter Property="Grid.Row" Value="{Binding Row}" />
<!-- Can either use a DataTrigger to determine these values,
or store them on the object itself -->
<Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}" />
<Setter Property="Grid.RowSpan" Value="{Binding RowSpan}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource POSButtonContent}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Any ideas on how to optomise the XAML would be appreciated..... Thanks.
Related
This is what I am currently having on screen with my texts:
Is there a way to align the 152 and bar? Also the same with..
15 MinutesRemaining and x?
Here is my current code:
<Grid>
<Frame Style="{StaticResource FrameStyle}">
<Grid Style="{StaticResource TellyGridStyle}">
<Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
<Label Text="1" Style="{StaticResource TeamLabelStyle}" />
</Frame>
<Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End" />
<Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
<Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
</Grid>
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
<Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
<Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
</Grid>
</Grid>
<StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
<Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
<Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
Static Resources:
<Style x:Key="BaseStyle" TargetType="View">
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalOptions" Value="Start" />
<!-- <Setter Property="Spacing" Value="10" />-->
</Style>
<Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="TeamLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="24" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
</Style>
<!--<ColumnDefinitionCollection x:Key="AutoColumns">
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</ColumnDefinitionCollection>-->
<RowDefinitionCollection x:Key="AutoRows">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
<Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
Thanks in Advance!
To avoid the issue that each of your labels vertical (Y / height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End" your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString just as if they were separate labels, you can assign x:Name, BindingContext, Binding as a Span is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />
I'm trying to get the GridSplitter to work across the rows in my grid:
However, the RowSpan property doesn't seem to work in case of this control.
How can I get the GridSplitter to work across my grid table and share the column width when moved?
This is my code:
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<Border Grid.Column="0">
<TextBlock Text="First Column" />
</Border>
<GridSplitter
Grid.RowSpan="1"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True" />
<Border Grid.Column="2">
<TextBlock Text="Second Column" />
</Border>
</Grid>
<Grid
Grid.Row="1"
Height="400"
Background="Silver">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock
FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock
FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
</Grid>
</Grid>
</StackPanel>
You only have GridSplitter in the first Gird. You could merge the two grids you have into one grid to get the desired result. Here is merged XAML for you to try:
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<Border>
<TextBlock Text="First Column" />
</Border>
<TextBlock FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<GridSplitter Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True"
Background="Gray"/>
<StackPanel Grid.Column="2">
<Border>
<TextBlock Text="Second Column" />
</Border>
<TextBlock FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
Also, here is the screenshot of resulting output:
You may also want to refer to this how-to page on MSDN.
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>
This is what I am trying to obtain:
Name
Date
This is the XAML I have. But in the result, both the texts Name & Date are overlapping each other.
<DataTemplate>
<Grid x:Name="showGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
And the styles AlbumTitleText and ArtistTitleText are here
<Style x:Key="AlbumTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="10,-2,10,7"></Setter>
</Style>
<Style x:Key="ArtistTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Margin" Value="10,7,10,0"></Setter>
</Style>
I think your row definitions are in the wrong place. Try ...
<DataTemplate>
<Grid x:Name="showGrid">
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
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.