I need to make my form in XAML (in UWP app) responsive and also scrollable. I have code like this
<Grid x:Name="MainGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainGrid.Margin" Value="24"/>
<Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/>
<Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/>
<Setter Target="FirstGrid.Margin" Value="0 0 12 0"/>
<Setter Target="SecondGrid.Margin" Value="12 0 0 0"/>
<Setter Target="SecondGrid.(Grid.Column)" Value="1"/>
<Setter Target="SecondGrid.(Grid.Row)" Value="0"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainGrid.Margin" Value="12"/>
<Setter Target="FirstGrid.Margin" Value="0 0 0 0"/>
<Setter Target="SecondGrid.Margin" Value="0 0 0 0"/>
<Setter Target="MainGrid.RowDefinitions[0].Height" Value="auto"/>
<Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/>
<Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/>
<Setter Target="SecondGrid.(Grid.Column)" Value="0"/>
<Setter Target="SecondGrid.(Grid.Row)" Value="1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="*" MaxWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblName" />
<my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtName" />
</Grid>
</Grid>
<Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="*" MaxWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblAge" />
<my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtAge" />
</Grid>
</Grid>
</Grid>
This is responsive, but not scrollable. When I add a ScrollViewer above the MainGrid -> It will be scrollable, but responsivity is not working ( <VisualState x:Name="WideState">)
Do you have any ides how can I make this Grid scrollable? Thx.
You need to have VisualStateGroups as a member of the root container.
The structure will be like:
<Grid Name=root>
VisualStateGroups here....
<ScrollViewer>
<Grid Name=MainGrid>
...First and Second grid...
</Grid>
</ScrollViewer>
</Grid>
Putthe VisualState code inside ScrollViewer instead of Grid
<ScrollViewer>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainGrid.Margin" Value="24"/>
<Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/>
<Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/>
<Setter Target="FirstGrid.Margin" Value="0 0 12 0"/>
<Setter Target="SecondGrid.Margin" Value="12 0 0 0"/>
<Setter Target="SecondGrid.(Grid.Column)" Value="1"/>
<Setter Target="SecondGrid.(Grid.Row)" Value="0"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainGrid.Margin" Value="12"/>
<Setter Target="FirstGrid.Margin" Value="0 0 0 0"/>
<Setter Target="SecondGrid.Margin" Value="0 0 0 0"/>
<Setter Target="MainGrid.RowDefinitions[0].Height" Value="auto"/>
<Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/>
<Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/>
<Setter Target="SecondGrid.(Grid.Column)" Value="0"/>
<Setter Target="SecondGrid.(Grid.Row)" Value="1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MainGrid" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0" Background="Yellow">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Height="500">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="*" MaxWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblName" />
</Grid>
</Grid>
<Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" Height="500" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="*" MaxWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblAge" />
</Grid>
</Grid>
</Grid>
</ScrollViewer>
Related
I'm trying to resize an image and a FontSize of a textblock based on the window width. My code is as shown below:
<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="340" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ChannelImage.Height" Value="80" />
<Setter Target="ChannelImage.Width" Value="80" />
<Setter Target="CategoryTitle.FontSize" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="5,5,5,5">
<Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
<TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
</RelativePanel>
</Grid>
</DataTemplate>
Here's the problems I'm having.
I've tried using different phone emulators with resolutions whose width is more than 340 but the resolution of ChannelImage simple doesn't scale to 80x80 epx.
I've also tried running the desktop version of the program. The image doesn't scale to 80x80 BUT as soon as I start resizing the window it gets way bigger than 80x80 and continues to grow as the window is widened further.
I would really appreciate if someone could point out what I'm doing wrong.
You need to wrap your datatemplate in UserControl like this:
<DataTemplate x:Name="TestItemTemplate" x:DataType="data:TestItem">
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="340" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ChannelImage.Height" Value="80" />
<Setter Target="ChannelImage.Width" Value="80" />
<Setter Target="CategoryTitle.FontSize" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="5,5,5,5">
<Image x:Name="ChannelImage" Source="{Binding assetName}" HorizontalAlignment="Center"/>
<TextBlock Foreground="Black" FontSize="14" RelativePanel.Below="ChannelImage" RelativePanel.AlignHorizontalCenterWith="ChannelImage"
Typography.Capitals="AllSmallCaps" x:Name="CategoryTitle" Text="{Binding itemName}" HorizontalAlignment="Center"/>
</RelativePanel>
</Grid>
</UserControl>
</DataTemplate>
I have a ListView like this
<ListView Name="lvTrailers"
Grid.Row="3"
SelectionChanged="lvTrailers_SelectionChanged"
SizeChanged="lvTrailers_SizeChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="65" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Thumbnail}"
Stretch="UniformToFill" />
<TextBlock Grid.Column="1"
Margin="10,5"
Text="{Binding Title}"
TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
private void lvTrailers_SizeChanged(object sender, SizeChangedEventArgs e)
{
// add some userful code
// not working
lvTrailers.ItemTemplate.SetValue(HeightProperty, e.NewSize.Height / 6);
}
In UWP apps users can resize window height and width so when it happen, I want to dynamic resize ListView ItemTemplate too. Any one could tell me how to do that?
You need to use AdaptiveTrigger. Here is an example to achieve that :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<DataTemplate x:Key="MyCustomItemDataTemplate">
<UserControl>
<Grid x:Name="content"
Margin="8"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="ms-appx:///Assets/StoreLogo.png"
Stretch="Uniform" />
<TextBlock Grid.Column="1"
Margin="10,5"
Text="blabla"
VerticalAlignment="Center"
TextWrapping="Wrap" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="content.Height"
Value="30" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="content.Height"
Value="Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>
</DataTemplate>
</Grid.Resources>
<ListView Name="items"
ItemTemplate="{StaticResource MyCustomItemDataTemplate}" />
</Grid>
hello I want that when the vision is less than 720 such as a phone, I would like the grid 2 went below the grid 1. I tried through its panel and adaptive trigger like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RelativePanel >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
<Setter Target="Grid1.(RelativePanel.Above)" Value="Grid2"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
<Setter Target="Grid1.(RelativePanel.LeftOf)" Value="Grid2"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="Grid1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" Style="{StaticResource ResourceKey=TextBoxStyle}"/>
</Grid>
<Grid Grid.Column="1" x:Name="Grid2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
<TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" Style="{StaticResource ResourceKey=TextBoxStyle}"></TextBox>
</Grid>
</Grid>
</RelativePanel>
</Grid>
But it does not work.
Thank you
There are two things you need to fix:
1) To make VisualState works, place the VisualStateManager under the first child of root Grid:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
......
</VisualStateManager.VisualStateGroups>
......
</Grid>
2) You don't need to add Columns, just place your two Grids under RelativePanel:
<RelativePanel>
<Grid x:Name="Grid1">
......
</Grid>
<Grid x:Name="Grid2">
......
</Grid>
</RelativePanel>
The completed xaml code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel>
<Grid x:Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" />
</Grid>
<Grid x:Name="Grid2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
<TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
</Grid>
</RelativePanel>
</Grid>
i found a solution without relativePanel, if anyone care:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="NarrowView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="text.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text1.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text2.(Grid.ColumnSpan)" Value="2" />
<Setter Target="text1.(Grid.Row)" Value="1" />
<Setter Target="text1.(Grid.Column)" Value="0" />
<Setter Target="text2.(Grid.Row)" Value="2" />
<Setter Target="text2.(Grid.Column)" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="860" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="text.(Grid.ColumnSpan)" Value="1" />
<Setter Target="text1.(Grid.Row)" Value="0" />
<Setter Target="text1.(Grid.Column)" Value="1" />
<Setter Target="text2.(Grid.Row)" Value="1" />
<Setter Target="text2.(Grid.Column)" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox x:Name="text" PlaceholderText="NOME" />
<TextBlock x:Name="text1" Grid.Row="0" Grid.Column="1" Text="Note"></TextBlock>
<TextBox x:Name="text2" Grid.Row="1" Grid.Column="1" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
</Grid>
I'm trying to align an Ellipse with Uniform Stretch to the center (both vertical and horizontal). But when I add HorizontalAlignment="Center" and/or VerticalAlignment="Center" to the Ellipse, it becomes invisible.
This is my XAML code:
<Grid Grid.Row="1" Margin="12">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="Ellipse_AccountImage" Grid.Row="0" Grid.Column="0" Stretch="Uniform">
<Ellipse.Fill>
<ImageBrush x:Name="ImageBrush_AccountImage"/>
</Ellipse.Fill>
</Ellipse>
<Grid x:Name="Grid_AccountInfo">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Name:" Margin="0,0,12,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Name"/>
<TextBlock Grid.Row="1" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Email:" Margin="0,0,12,0"/>
<TextBlock Grid.Row="1" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Email"/>
<TextBlock Grid.Row="2" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Created:" Margin="0,0,12,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Created"/>
</Grid>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Ellipse_AccountImage.(Grid.RowSpan)" Value="2"/>
<Setter Target="Ellipse_AccountImage.Margin" Value="0,0,24,0"/>
<Setter Target="Grid_AccountInfo.(Grid.Row)" Value="0"/>
<Setter Target="Grid_AccountInfo.(Grid.Column)" Value="1"/>
<Setter Target="Grid_AccountInfo.(Grid.RowSpan)" Value="2"/>
<Setter Target="Grid_AccountInfo.VerticalAlignment" Value="Center"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Ellipse_AccountImage.(Grid.ColumnSpan)" Value="2"/>
<Setter Target="Ellipse_AccountImage.Margin" Value="0,0,0,24"/>
<Setter Target="Grid_AccountInfo.(Grid.Row)" Value="1"/>
<Setter Target="Grid_AccountInfo.(Grid.Column)" Value="0"/>
<Setter Target="Grid_AccountInfo.(Grid.ColumnSpan)" Value="2"/>
<Setter Target="Grid_AccountInfo.HorizontalAlignment" Value="Center"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I already tried putting the Ellipse element in a ViewBox, Canvas or Grid but that doesn't solve the problem.
From the comments above it seemed that it isn't possible to solve this with XAML only. Instead I wrote a function that updates the width and height manually every time the page is resized (like igrali said). Thank your for the help!
I'm trying to design an ItemsControl with a timeline that shows the sub items connected with arrows/lines.
The items are custom controls, and i'd like to connect the lines to the control's borders.
What's the best way to approach this?
Ok so this is the code for the Itemscontrol:
<ItemsControl DataContext="{StaticResource StratCol1}" ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
This is the items collection:
<ctrl:StrategyCollection x:Key="StratCol1" >
<ctrl:StrategyNode Height="150" Width="Auto" Title="Title A" StrategyParameter="{StaticResource dpara}" Period="All year" IsChecked="False"/>
<ctrl:StrategyNode Height="150" Width="Auto" Title="Title B" StrategyParameter="{StaticResource dpara}" Period="3 Months" IsChecked="False" />
</ctrl:StrategyCollection>
And this is the style of the items:
<Style TargetType="{x:Type ctrl:StrategyNode}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ctrl:StrategyNode}">
<ControlTemplate.Resources>
</ControlTemplate.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBrush"
Storyboard.TargetProperty="Color" To="{StaticResource ControlMouseOverColor}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBackground"
Storyboard.TargetProperty="Color" To="{StaticResource ControlCheckedBackColor}" />
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBrush"
Storyboard.TargetProperty="Color" To="{StaticResource ControlCheckedColor}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="xBorderBackground"
Storyboard.TargetProperty="Color" To="Transparent" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Grid.Column="0" BorderThickness="3" CornerRadius="8" HorizontalAlignment="Stretch" Panel.ZIndex="1" >
<Border.BorderBrush>
<SolidColorBrush x:Name="xBorderBrush" Color="{StaticResource ControlBorderColor}"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush x:Name="xBorderBackground" Color="{StaticResource ControlBackColor}"/>
</Border.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="2" Grid.Row="0" CornerRadius="8,8,0,0" Height="18.4" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlTitleBackColor}" />
</Border.Background>
<TextBlock Text="{Binding Path=Title, RelativeSource={RelativeSource TemplatedParent}}" Foreground="AliceBlue" FontSize="14" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextAlignment="Center" />
</Border>
<Grid x:Name="ContentGrid" Height="Auto" Grid.Column="1" Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Label Content="Period" Grid.ColumnSpan="2"/>
<Label Content="{Binding Path=Period, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" Grid.ColumnSpan="2"/>
<Grid x:Name="ParametersGrid" Grid.Row="1" Grid.ColumnSpan="4" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Label Content="Qos" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"/>
<Label Content="{Binding Path=Avg_Qos, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="0" Grid.Column="3"/>
<Label Content="Safty Range" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
<Label Content="{Binding Path=Avg_SaftyRange, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Grid.Column="3"/>
<Label Content="TT in days" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"/>
<Label Content="{Binding Path=Avg_TimeToDeliverInDays, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="2" Grid.Column="3"/>
</Grid>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you for your help.