Listboxitem stop showing highlited on select in Windows phone 8 - xaml

I am using listbox to show my data in windows phone 8. I have added some logic for enable/disable click of listboxitem. Its working correct now but how I don't know on tap color change for listbox is now stop working can anyone please help me to get out from this.
here is my code
<ListBox Name="lstCourses"
ItemsSource="{StaticResource ListOfCourse}"
toolkit:TiltEffect.IsTiltEnabled="True"
SelectionChanged="lstCourses_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter IsHitTestVisible="{Binding IsEnabled}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap"
Grid.Row="0"
FontFamily="Segoe WP SemiLight"
FontSize="25"
Text="{Binding CourseName}"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap"
Grid.Column="0"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Foreground="{StaticResource PhoneSubtleBrush}"
Text="Instructor: "/>
<TextBlock TextWrapping="Wrap"
Grid.Column="1"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Text="{Binding CourseInstructor, Converter={StaticResource InstructorConvertor}}"
Foreground="{StaticResource PhoneSubtleBrush}"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

That happens because you override the default ItemContainerStyle which is null and setting a new style for the ListBoxItem without a storyboard for the Selected / Unselected Visual States.
Have a look at the default styles. What you should do will be straightforward after you read the article.
EDIT
Here's an example.
<ListBox
Name="lstCourses"
ItemsSource="{StaticResource ListOfCourse}"
toolkit:TiltEffect.IsTiltEnabled="True"
SelectionChanged="lstCourses_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid
IsHitTestVisible="{Binding IsEnabled}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionState">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="textbox1"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame
KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="textbox2"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame
KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="textbox3"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame
KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock
x:Name="textbox1"
TextWrapping="Wrap"
Grid.Row="0"
FontFamily="Segoe WP SemiLight"
FontSize="25"
Text="{Binding CourseName}"
/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock
x:Name="textbox2"
TextWrapping="Wrap"
Grid.Column="0"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Foreground="{StaticResource PhoneSubtleBrush}"
Text="Instructor: "
/>
<TextBlock
x:Name="textbox3"
TextWrapping="Wrap"
Grid.Column="1"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Text="{Binding CourseInstructor, Converter={StaticResource InstructorConvertor}}"
Foreground="{StaticResource PhoneSubtleBrush}"
/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

Also,if you are manipulating through code ,you can set "YourListBox.SelectedItem.Background" property in Selection_changed event handler of ListBox.
If you are using styles then just update Selected / Unselected Visual States accordingly.

Related

XAML- VisualStateManager not working

I am working on a Universal Windows App. I need to adapt the layout according to the screen. To accomplish that, I am using a Visual State Manager. However, when I test the application, the layout does not change. I am not an expert on XAML, but I do not see anything wrong with my code.
<Grid Background="#6A0888"
HorizontalAlignment="Stretch"
SizeChanged="Grid_SizeChanged">
<Grid.RowDefinitions>
<RowDefinition Height="46"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<WebView
Grid.Row="1"
x:Name="lan_Browser"
NavigationCompleted="lan_Browser_NavigationCompleted_Desktop"
LoadCompleted="lan_Browser_LoadCompleted"
ContentLoading="lan_Browser_ContentLoading"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="Auto"
Width="Auto"/>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
VerticalAlignment="Top"
HorizontalAlignment="Right">
<ProgressRing
x:Name="lan_ProgressRing"
Foreground="White"
IsActive="True"
Width="40"
Height="40"
VerticalAlignment="Center"
/>
<Button x:Name="lan_Backward"
Click="lan_Backward_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Forward"
Click="lan_Forward_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Refresh"
Click="lan_Refresh_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Home"
Click="lan_Home_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
</StackPanel>
<Grid Grid.Row="1" Name="Languages_Home">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Spanish_Button.Foreground" Value="White"></Setter>
<Setter Target="English_Button.Grid.Row" Value="0"></Setter>
<Setter Target="English_Button.Grid.ColumnSpan" Value="3"></Setter>
<Setter Target="Translator_Button.Grid.Row" Value="1"></Setter>
<Setter Target="Translator_Button.Grid.ColumnSpan" Value="3"></Setter>
<Setter Target="Spanish_Button.Grid.Row" Value="2"></Setter>
<Setter Target="Spanish_Button.Grid.ColumnSpan" Value="3"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="English_Button.Grid.Column" Value="0"></Setter>
<Setter Target="English_Button.Grid.RowSpan" Value="3"></Setter>
<Setter Target="Translator_Button.Grid.Column" Value="1"></Setter>
<Setter Target="Translator_Button.Grid.RowSpan" Value="3"></Setter>
<Setter Target="Spanish_Button.Grid.Column" Value="2"></Setter>
<Setter Target="Spanish_Button.Grid.RowSpan" Value="3"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="English_Button"
HorizontalAlignment="Stretch"
Grid.Column="0"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Red"
VerticalContentAlignment="Center"
FontSize="60"
Click="English_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/britain-flag.jpg" Height="300" Width="300"></Image>
<TextBlock FontFamily="60" HorizontalAlignment="Center">English</TextBlock>
</StackPanel>
</Button>
<Button x:Name="Translator_Button"
HorizontalAlignment="Stretch"
Grid.Column="1"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Green"
VerticalContentAlignment="Center"
FontSize="60"
Click="Translator_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/translator.png" Height="300" Width="300"></Image>
<TextBlock FontSize="60" HorizontalAlignment="Center">Translator</TextBlock>
<TextBlock FontFamily="60" HorizontalAlignment="Center">Traductor</TextBlock>
</StackPanel>
</Button>
<Button x:Name="Spanish_Button"
HorizontalAlignment="Stretch"
Grid.Column="2"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="#FFBF00"
VerticalContentAlignment="Center"
FontSize="60"
Click="Spanish_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/spain-flag.jpg" Height="300" Width="300"></Image>
<TextBlock FontFamily="60" HorizontalAlignment="Center">Español</TextBlock>
</StackPanel>
</Button>
</Grid>
</Grid>
Thanks for your help. By the way, I am new here, so I apologize if I broke any rules.
The states are not authored correctly. For example, this Setter:
<Setter Target="Spanish_Button.Foreground" Value="White"></Setter>
Instead, that should be something like:
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<Storyboard>
<ColorAnimation Duration="0" To="#FFCE0000" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Spanish_Button" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
I agree with Matthais. Blend for Visual Studio might be a useful tool there and provides an easy WYSIWYG way to author these states.

Menu button at the bottom UWP Hamburger Navigation pane

I am currently building a hamburger menu for my UWP app build using SplitView.Pane. The "Buttons" are listBoxItems in a listBox. Is there a way to make the setting icon be located at the bottom of the SplitView.Pane like in the native windows new App...Thanks
try this sample .....
it's working good like a native app
https://mohamedsaqer.wordpress.com/category/xaml/
use 2 ListBox inside a RelativePanel. in down listbox set RelativePanel.AlignBottomWithPanel="True" and when select item from the fist listbox set the selectedIndex=-1 for the other listBox
<SplitView.Pane>
<RelativePanel>
<ListBox x:Name="UpperListBox">
<ListBoxItem .....
</ListBox>
<ListBox x:Name="DownListBox" RelativePanel.AlignBottomWithPanel="True">
<ListBoxItem .....
</ListBox>
</RelativePanel>
There is no easy (if any) way to align part of ListBox items on the top and another part on the bottom, so the answer is pretty simple - don't use ListBox and build necessary layout manually. For example, like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button x:Name="TopButton1" Grid.Row="0" Content="TopButton" />
<Button x:Name="TopButton2" Grid.Row="1" Content="TopButton" />
<Button x:Name="TopButton3" Grid.Row="2" Content="TopButton" />
<Button x:Name="BottomButton" Grid.Row="4" Content="BottomButton" />
</Grid>
Btw, it's recommended to use ListView instead of ListBox in UWP apps.
I have an app with ham menu and I use Radio Buttons. In the group propertie of radio button I use the same group name. That way you can use any layout you like, for ex grid, with stack panels and your buttons can be anywhere. When you tapp any button it will selected like listview and tapping another one will unselect and select the new one.
Hum Menu
<SplitView.Pane>
<Grid>
<StackPanel>
<ToggleButton x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Tapped="HamburgerButton_Tapped" Foreground="White"
FontSize="16" FontWeight="Bold" Style="{StaticResource HamburgerToggleButtonStyle}" />
<RadioButton Content="Top 1" x:Name="btn1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
<RadioButton Content="Top 2" x:Name="btn2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="True" Foreground="White" GroupName="HamMenu"/>
<RadioButton Content="Top 3" x:Name="btn3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
</StackPanel>
<StackPanel VerticalAlignment="Bottom">
<RadioButton Tag="" Content="Bottom 1" x:Name="btn4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Style="{StaticResource RadioButtonStyle1}" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
<RadioButton Tag="" Content="Bottom 2" x:Name="btn5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Style="{StaticResource RadioButtonStyle1}" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
</StackPanel>
</Grid>
</SplitView.Pane>
Radio button Style
<Style x:Key="RadioButtonStyle1" TargetType="RadioButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="Padding" Value="8,6,0,0"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="MainRadioGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SecondaryRadioGrid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="MainRadioGrid.(Panel.Background)">
<Setter.Value>
<SolidColorBrush Color="White"/>
</Setter.Value>
</Setter>
<Setter Target="IconTextHum.(TextBlock.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
<Setter Target="ContentPresenter.(ContentPresenter.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<VisualState.Setters>
<Setter Target="ContentPresenter.(ContentPresenter.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
<Setter Target="IconTextHum.(TextBlock.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
<Setter Target="SecondaryRadioGrid.(Panel.Background).(SolidColorBrush.Color)">
<Setter.Value>
<Color>#02000000</Color>
</Setter.Value>
</Setter>
<Setter Target="MainRadioGrid.(Panel.Background)">
<Setter.Value>
<SolidColorBrush Color="White"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="SecondaryRadioGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="#02000000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="grid1" Height="50" VerticalAlignment="Top" Width="50">
<TextBlock x:Name="IconTextHum" TextWrapping="Wrap" Text="{TemplateBinding Tag}" d:LayoutOverrides="Width, Height" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="21.333"/>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" TextWrapping="Wrap" VerticalAlignment="Center" Margin="10,0,0,0"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You should use a RelativePanel element:
<SplitView.Pane>
<RelativePanel>
<StackPanel RelativePanel.AlignTopWithPanel="True">
...
</StackPanel>
<StackPanel RelativePanel.AlignBottomWithPanel="True">
...
</StackPanel>
</RelativePanel>
</SplitView.Pane>

XAML: align Ellipse with Uniform stretch to the center

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!

ControlTemplate(Style) binding ItemsSource property

I want to do a data binding in a Style(ControlTemplate) in a ListView
My ListView looks like:
<ListView ItemTemplateSelector="{StaticResource ItemTemplate_Selector}" ItemContainerStyleSelector="{StaticResource ItemContainerStyle_Selector}"/>
Most of properties fetched from ItemsSource are binding in the DataTemplate:
e.g.
<DataTemplate x:Key="OneOfItem">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Name}"/>
<StackPanel Grid.Row="1">
<RichTextBlock Grid.Column="0" local:HyperlinkExtensions.Text="{Binding Message}"/>
<TextBlock Grid.Column="1" Text="{Binding Time}"/>
</StackPanel>
</Grid>
</DataTemplate>
For the reason that there's a area that will be affected by different visual state and there's a property displayed in that area, so I have to binding it in the ItemContainerStyle like:
e.g.
<Style x:Key="HeadPicStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Header" Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock x:Name="HeaderText" Text="{Binding Header}"/>
</Grid>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveStatesTest">
<VisualState x:Name="DefaultStateTest">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource WideStateChangeThreshold}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="NarrowStateTest">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NarrowStateWindowWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Header.Width" Value="100"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
On my perspective, the itemContainerStyle is targeted to the itemSource in the ListView, so I can access it's property (means I can directly binding the property name)
However, the HeaderText's text can not be seen in the app.
I'm wondering if my binding in the style is wrong or not?

WPF ItemsControl style with connecting lines like a timeline

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.