Develop Reference

UWP XAML NavigationMenu Change styles

How can I change the Styles of the NavigationView in XAML?
By default, the Minimal mode has AlwaysShowHeader="True" but I want to set it to AlwaysShowHeader="False".
This is not working:
<NavigationView
x:Name="MyNavigationMenu"
AlwaysShowHeader="False" >

Simple solution
You could hide it by making the HeaderTemplate's DataTemplate empty, but then you coul also easily not set the header at all
<NavigationView
x:Name="MyNavigationMenu"
Header="Hello World!"
AlwaysShowHeader="False">
<NavigationView.HeaderTemplate>
<DataTemplate />
</NavigationView.HeaderTemplate>
<TextBlock Text="Inner content" />
</NavigationView>
Better solution
To make the inner content flow into the header area as well, you have to modify the default template. You can find the following inside:
<ContentControl x:Name="HeaderContent"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
HorizontalContentAlignment="Stretch"
IsTabStop="False"
MinHeight="48"
VerticalContentAlignment="Stretch"/>
Notice the MinHeight="48" property. This causes the header always take up at least 48 effective pixels. If you don't set any Header it will still take up 48 pixels in the Minimal mode. To fix this, simply remove this property altogether.
Of course now you have to make sure your content is aware that there might be a hamburger menu button above when in Minimal mode and you must add some Margin when appropriate.
Complete updated Style
<Style x:Key="CustomNavigationMenuStyle" TargetType="NavigationView">
<Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Margin="12,5,0,11" VerticalAlignment="Stretch">
<TextBlock x:Name="Header" Style="{StaticResource TitleTextBlockStyle}" Text="{Binding}" TextWrapping="NoWrap" VerticalAlignment="Bottom"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="NavigationView">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DisplayModeGroup">
<VisualState x:Name="Compact"/>
<VisualState x:Name="Expanded">
<VisualState.Setters>
<Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Minimal">
<VisualState.Setters>
<Setter Target="HeaderContent.Margin" Value="48,0,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="TogglePaneGroup">
<VisualState x:Name="TogglePaneButtonVisible"/>
<VisualState x:Name="TogglePaneButtonCollapsed">
<VisualState.Setters>
<Setter Target="TogglePaneButton.Visibility" Value="Collapsed"/>
<Setter Target="PaneContentGridToggleButtonRow.Height" Value="4"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderGroup">
<VisualState x:Name="HeaderVisible"/>
<VisualState x:Name="HeaderCollapsed">
<VisualState.Setters>
<Setter Target="HeaderContent.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SettingsGroup">
<VisualState x:Name="SettingsVisible"/>
<VisualState x:Name="SettingsCollapsed">
<VisualState.Setters>
<Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="AutoSuggestGroup">
<VisualState x:Name="AutoSuggestBoxVisible"/>
<VisualState x:Name="AutoSuggestBoxCollapsed">
<VisualState.Setters>
<Setter Target="AutoSuggestArea.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="PaneStateGroup">
<VisualState x:Name="NotClosedCompact"/>
<VisualState x:Name="ClosedCompact">
<VisualState.Setters>
<Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed"/>
<Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="TitleBarVisibilityGroup">
<VisualState x:Name="TitleBarVisible"/>
<VisualState x:Name="TitleBarCollapsed">
<VisualState.Setters>
<Setter Target="PaneButtonGrid.Margin" Value="0,32,0,0"/>
<Setter Target="PaneContentGrid.Margin" Value="0,32,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Width="{StaticResource PaneToggleButtonSize}" Canvas.ZIndex="100">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="TogglePaneTopPadding"/>
<Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Grid.Row="1" Style="{TemplateBinding PaneToggleButtonStyle}"/>
</Grid>
<SplitView x:Name="RootSplitView" Background="{TemplateBinding Background}" CompactPaneLength="{TemplateBinding CompactPaneLength}" DisplayMode="Inline" IsTabStop="False" IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenPaneLength="{TemplateBinding OpenPaneLength}" PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}">
<SplitView.Pane>
<Grid x:Name="PaneContentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="56"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="8"/>
</Grid.RowDefinitions>
<Grid x:Name="ContentPaneTopPadding"/>
<Grid x:Name="AutoSuggestArea" Height="40" Grid.Row="2" VerticalAlignment="Center">
<ContentControl x:Name="PaneAutoSuggestBoxPresenter" Content="{TemplateBinding AutoSuggestBox}" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
<Button x:Name="PaneAutoSuggestButton" Content="" MinHeight="40" Style="{TemplateBinding PaneToggleButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
</Grid>
<NavigationViewList x:Name="MenuItemsHost" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemsSource="{TemplateBinding MenuItemsSource}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" Margin="0,0,0,20" Grid.Row="3" SelectionMode="Single" SelectedItem="{TemplateBinding SelectedItem}"/>
<Border x:Name="FooterContentBorder" Child="{TemplateBinding PaneFooter}" Grid.Row="4"/>
<NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="5">
<NavigationViewItem.Icon>
<SymbolIcon Symbol="Setting"/>
</NavigationViewItem.Icon>
</NavigationViewItem>
</Grid>
</SplitView.Pane>
<Grid x:Name="ContentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
<ContentPresenter Content="{TemplateBinding Content}" Grid.Row="1"/>
</Grid>
</SplitView>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Cannot get button working inside HubSection HeaderTemplate

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

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

Windows 8.1 - How to place a different element(like a TextBox) instead of the title string in SettingsFlyout

I have a Windows 8.1 application with a Settings Flyout.
I am trying to extend the SettingsFlyout so as to modify the top header part of it to consist of a TextBox instead of the title as shown below
As you can see in the above UI, there is no Title.
But looks like the Title property is taken by default in SettingsFlyout.
How do I override this?
I would be very glad if someone can point me in the right direction.
Thanks in Advance.

You could change the style/template of the flyout, but you shouldn't do that. In case you really need to - this is the default one I extracted with Blend.
<Style x:Key="SettingsFlyoutStyle1" TargetType="SettingsFlyout">
<Setter Property="RequestedTheme" Value="Light"/>
<Setter Property="HeaderBackground" Value="{ThemeResource SettingsFlyoutHeaderBackgroundThemeBrush}"/>
<Setter Property="HeaderForeground" Value="{ThemeResource SettingsFlyoutHeaderForegroundThemeBrush}"/>
<Setter Property="Background" Value="{ThemeResource SettingsFlyoutBackgroundThemeBrush}"/>
<Setter Property="BorderThickness" Value="1,0,0,0"/>
<Setter Property="Padding" Value="39,33,40,33"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="Width" Value="346"/>
<Setter Property="MinWidth" Value="320"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SettingsFlyout">
<Border BorderBrush="{Binding TemplateSettings.BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}" BorderThickness="{Binding TemplateSettings.BorderThickness, RelativeSource={RelativeSource Mode=TemplatedParent}}" Background="{TemplateBinding Background}">
<Border.Resources>
<Style x:Key="BackButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}"/>
<Setter Property="FontSize" Value="39"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsFlyoutBackButtonPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedBackground"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedGlyph"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SettingsEdgeLocationStates">
<VisualState x:Name="Right"/>
<VisualState x:Name="Left">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="NormalGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value=""/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="PressedGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value=""/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent" Margin="-12,-16,-10,-10">
<Ellipse x:Name="Background" Fill="Transparent" HorizontalAlignment="Left" Height="30" Margin="12,0,0,0" Stroke="{TemplateBinding Foreground}" StrokeThickness="2" Width="30"/>
<TextBlock x:Name="NormalGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Foreground}" FontWeight="SemiLight" Margin="10,0,0,0" Text=""/>
<Ellipse x:Name="PressedBackground" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="30" Margin="12,0,0,0" Opacity="0" StrokeThickness="0" Width="30"/>
<TextBlock x:Name="PressedGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Background}" FontWeight="SemiLight" Margin="10,0,0,0" Opacity="0" Text=""/>
</Grid>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Margin="-3,-6,-3,0" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Margin="-3,-6,-3,0" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Border.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="Header" Background="{Binding TemplateSettings.HeaderBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="BackButton" Background="{Binding TemplateSettings.HeaderBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{Binding TemplateSettings.HeaderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Height="30" Margin="39,0,0,12" Style="{StaticResource BackButtonStyle}" VerticalAlignment="Bottom" Width="30"/>
<TextBlock Grid.Column="1" Foreground="{Binding TemplateSettings.HeaderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}" FontWeight="SemiLight" FontSize="{ThemeResource SettingsFlyoutHeaderThemeFontSize}" FontFamily="{ThemeResource SettingsFlyoutHeaderThemeFontFamily}" Margin="10,0,0,13" Text="{TemplateBinding Title}" TextTrimming="CharacterEllipsis" VerticalAlignment="Bottom"/>
<Image Grid.Column="2" Height="30" Margin="0,0,40,15" Source="{Binding TemplateSettings.IconSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalAlignment="Bottom" Width="30"/>
</Grid>
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{Binding TemplateSettings.ContentTransitions, RelativeSource={RelativeSource Mode=TemplatedParent}}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ScrollViewer>
<Rectangle x:Name="InputPanePlaceholder" Grid.Row="2"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Popup never loses focus

I'm having a problem with my popup. When the user clicks the profile, I want to display a popup.
This already works but the popup doesn't close when it loses focus.
I've tried to set the stayopen property to false but then the popup shows up for about half a second and then immediately closes.
I also tried to catch the focus lost event in code, but the event never triggers...
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:converters="clr-namespace:UserControlSolution.Converter"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.ProfileControl"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="480"
Height="55">
<UserControl.Resources>
<converters:ConnectedStatusToColorConverter x:Key="ConnectedStatusToColorConverter"/>
<Style x:Key="ProfileOptionsStyle" TargetType="TextBlock">
<Setter Property="Padding" Value="7" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="TextAlignment" Value="Right" />
<Setter Property="Margin" Value="10,3,5,0" />
<Setter Property="FontSize" Value="14.5" />
<Setter Property="TextWrapping" Value="WrapWithOverflow" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SelectGrey}" />
</Trigger>
</Style.Triggers>
</Style>
<Canvas x:Key="Lynx_logo_NoText" x:Name="Lynx_logo_NoText" HorizontalAlignment="Left" Height="189.333" UseLayoutRounding="False" VerticalAlignment="Top" Width="504.864">
<Canvas x:Name="Laag_2" Height="156.803" Canvas.Left="26.033" Canvas.Top="16.47" Width="450.509">
<Path Data="F1M140.0616,111.5394L140.0616,168.4354C140.0616,169.0754,139.9016,169.6314,139.5826,170.1064C139.2646,170.5874,138.7136,170.9654,137.9206,171.2384C137.1316,171.5194,136.0656,171.7644,134.7216,171.9584C133.3746,172.1524,131.7546,172.2564,129.8586,172.2564C127.8856,172.2564,126.2406,172.1524,124.9396,171.9584C123.6336,171.7644,122.5656,171.5194,121.7336,171.2384C120.9056,170.9654,120.3296,170.5874,120.0126,170.1064C119.6986,169.6314,119.5416,169.0754,119.5416,168.4354L119.5416,111.5394L93.9836,56.1284C93.1016,54.3004,92.5696,52.8684,92.3686,51.8324C92.1686,50.8104,92.3686,50.0044,92.9656,49.4514C93.5616,48.8954,94.6346,48.5374,96.1866,48.3784C97.7356,48.2214,99.8216,48.1414,102.4466,48.1414C104.8326,48.1414,106.7586,48.2214,108.2336,48.3784C109.7056,48.5374,110.8746,48.7554,111.7496,49.0294C112.6246,49.3174,113.2846,49.7144,113.7196,50.2254C114.1536,50.7424,114.5736,51.4014,114.9756,52.1934C114.9756,52.1934,128.1596,87.4004,130.2146,92.0934L130.4496,92.0934C132.2656,87.5664,134.1506,83.0514,136.0836,78.5604C138.0196,74.0694,139.9816,69.6334,141.9666,65.2574C141.9666,65.2574,164.0146,19.1754,164.4506,18.6164C164.8886,18.0634,165.4816,17.6464,166.2436,17.3654C166.9976,17.0844,168.0476,16.8684,169.4056,16.7064C170.7566,16.5504,172.4606,16.4704,174.5306,16.4704C177.3946,16.4704,179.6426,16.5734,181.2716,16.7684C182.8956,16.9674,184.0326,17.3474,184.6716,17.9014C185.3096,18.4604,185.5226,19.2544,185.3286,20.2884C185.1266,21.3194,184.5926,22.7164,183.7176,24.4624z" Fill="#FF646363" Height="155.786" Canvas.Left="66.261" Stretch="Fill" Canvas.Top="0" Width="93.104"/>
<Path Data="M468.9649,21.5218C470.5999,20.1588,471.8999,19.3438,472.8649,19.0808C473.8309,18.8198,474.5919,19.1598,475.1489,20.1048C475.7059,21.0488,476.0769,22.5998,476.2629,24.7498C476.4469,26.9018,476.5419,29.7638,476.5419,33.3308C476.5419,36.6918,476.4849,39.3148,476.3739,41.2048C476.2629,43.0938,476.0579,44.5898,475.7619,45.6918C475.4659,46.7938,475.1119,47.6358,474.7029,48.2108C474.2959,48.7898,473.7559,49.2888,473.0879,49.7068L415.7079,95.0558L473.0879,140.8758C473.7559,141.4028,474.3139,141.9788,474.7589,142.6088C475.2039,143.2388,475.5579,144.1038,475.8169,145.2058C476.0769,146.3088,476.2629,147.8048,476.3739,149.6938C476.4849,151.5828,476.5419,154.1028,476.5419,157.2518C476.5419,160.7158,476.4469,163.4478,476.2629,165.4398C476.0769,167.4358,475.7059,168.8258,475.1489,169.6128C474.5919,170.3998,473.8309,170.6638,472.8649,170.3998C471.8999,170.1388,470.5999,169.3248,468.9649,167.9588L402.6729,112.3758L338.6079,165.4398C336.9759,166.6998,335.6559,167.5138,334.6529,167.8808C333.6499,168.2508,332.8699,168.0138,332.3139,167.1718C331.7559,166.3328,331.4039,164.8648,331.2549,162.7628C331.1069,160.6648,331.0319,157.7788,331.0319,154.1028C331.0319,150.9538,331.0879,148.3828,331.1989,146.3868C331.3109,144.3948,331.4969,142.8198,331.7559,141.6638C332.0179,140.5098,332.3879,139.6708,332.8699,139.1438C333.3549,138.6208,333.8929,138.0418,334.4859,137.4128L388.4109,93.6378L334.4859,50.1798C333.8929,49.6558,333.3549,49.1308,332.8699,48.6048C332.3879,48.0808,332.0179,47.3208,331.7559,46.3218C331.4969,45.3248,331.3109,43.9348,331.1989,42.1488C331.0879,40.3648,331.0319,37.9518,331.0319,34.9058C331.0319,31.6528,331.1259,29.0008,331.3109,26.9538C331.4969,24.9068,331.8509,23.4388,332.3689,22.5448C332.8899,21.6548,333.6499,21.3118,334.6529,21.5218C335.6559,21.7328,336.9759,22.4668,338.6079,23.7258L402.2269,76.6328L468.9649,21.5218z"
Height="158.784" Canvas.Left="301.359" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="{Binding mainViewModel.IsConnected, Converter={StaticResource ConnectedStatusToColorConverter}}" StrokeThickness="7.281" StrokeMiterLimit="4" StrokeLineJoin="Miter" Canvas.Top="-1.115" Width="152.791"/>
<Path Data="F1M106.0738,163.4183C106.0738,165.0103,105.9928,166.3413,105.8348,167.4143C105.6748,168.4873,105.4178,169.4023,105.0598,170.1573C104.7018,170.9143,104.2638,171.4703,103.7478,171.8273C103.2298,172.1863,102.6138,172.3643,101.8988,172.3643L33.6678,172.3643C31.8368,172.3643,30.1078,171.7493,28.4788,170.5163C26.8478,169.2833,26.0328,167.1153,26.0328,164.0153L26.0328,21.1113C26.0328,20.4753,26.1918,19.9183,26.5098,19.4413C26.8268,18.9633,27.3848,18.5873,28.1798,18.3083C28.9738,18.0303,30.0478,17.7913,31.4008,17.5923C32.7528,17.3943,34.3828,17.2933,36.2918,17.2933C38.2788,17.2933,39.9298,17.3943,41.2418,17.5923C42.5538,17.7913,43.6078,18.0303,44.4028,18.3083C45.1968,18.5873,45.7548,18.9633,46.0728,19.4413C46.3898,19.9183,46.5508,20.4753,46.5508,21.1113L46.5508,154.5913L101.8988,154.5913C102.6138,154.5913,103.2298,154.7703,103.7478,155.1283C104.2638,155.4853,104.7018,156.0043,105.0598,156.6793C105.4178,157.3543,105.6748,158.2493,105.8348,159.3623C105.9928,160.4773,106.0738,161.8283,106.0738,163.4183" Fill="#FF646363" Height="155.071" Canvas.Left="0" Stretch="Fill" Canvas.Top="0.823" Width="80.041"/>
<Path Data="F1M312.2998,164.0872C312.2998,165.6792,312.0318,167.0302,311.4988,168.1442C310.9638,169.2582,310.2648,170.1712,309.4018,170.8872C308.5378,171.6032,307.5708,172.1202,306.5028,172.4382C305.4328,172.7542,304.3638,172.9142,303.2938,172.9142L296.5108,172.9142C294.3698,172.9142,292.4988,172.6942,290.8958,172.2592C289.2918,171.8222,287.7708,171.0262,286.3308,169.8732C284.8938,168.7212,283.4518,167.1502,282.0128,165.1612C280.5748,163.1742,279.0458,160.6282,277.4328,157.5262L230.3438,69.7332C227.8818,65.2002,225.4018,60.4492,222.8998,55.4782C220.3988,50.5092,218.0728,45.6782,215.9178,40.9852L215.6798,40.9852C215.8378,46.7112,215.9568,52.5562,216.0378,58.5202C216.1158,64.4842,216.1568,70.4092,216.1568,76.2932L216.1568,169.4552C216.1568,170.0132,215.9888,170.5492,215.6538,171.0662C215.3178,171.5842,214.7518,171.9812,213.9538,172.2592C213.1558,172.5382,212.1088,172.7752,210.8078,172.9752C209.5068,173.1722,207.8478,173.2732,205.8348,173.2732C203.8198,173.2732,202.1628,173.1722,200.8618,172.9752C199.5608,172.7752,198.5338,172.5382,197.7788,172.2592C197.0228,171.9812,196.4788,171.5842,196.1428,171.0662C195.8068,170.5492,195.6398,170.0132,195.6398,169.4552L195.6398,27.0292C195.6398,23.8492,196.5418,21.5832,198.3478,20.2302C200.1538,18.8792,202.1238,18.2022,204.2578,18.2022L214.3548,18.2022C216.7328,18.2022,218.7228,18.4012,220.3238,18.7982C221.9248,19.1972,223.3618,19.8532,224.6328,20.7662C225.9038,21.6822,227.1368,22.9552,228.3278,24.5842C229.5168,26.2142,230.7648,28.2632,232.0738,30.7272L268.2728,98.4812C270.5028,102.6162,272.6538,106.6512,274.7298,110.5882C276.8038,114.5242,278.8018,118.4012,280.7238,122.2192C282.6458,126.0352,284.5478,129.7932,286.4308,133.4912C288.3138,137.1892,290.1768,140.9072,292.0228,144.6442L292.1418,144.6442C291.9818,138.3632,291.8818,131.8202,291.8428,125.0222C291.8018,118.2232,291.7838,111.6822,291.7838,105.3992L291.7838,21.6612C291.7838,21.1062,291.9518,20.5882,292.2858,20.1102C292.6218,19.6332,293.1868,19.2162,293.9858,18.8582C294.7818,18.5002,295.8308,18.2432,297.1318,18.0832C298.4328,17.9242,300.1318,17.8442,302.2298,17.8442C304.0748,17.8442,305.6708,17.9242,307.0128,18.0832C308.3548,18.2432,309.4038,18.5002,310.1608,18.8582C310.9148,19.2162,311.4618,19.6332,311.7978,20.1102C312.1318,20.5882,312.2998,21.1062,312.2998,21.6612z"
Fill="#FF646363" Height="155.429" Canvas.Left="169.607" Stretch="Fill" Canvas.Top="1.374" Width="116.66"/>
</Canvas>
<Canvas x:Name="Laag_3"/>
</Canvas>
</UserControl.Resources>
<Grid x:Name="HeaderContainer" Grid.Row="0" Background="{StaticResource VeryDarkGrey}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ProfilePanelStates">
<VisualState x:Name="ProfilePanelMouseEnter">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ProfilePanel">
<EasingColorKeyFrame KeyTime="0" Value="#FF404040"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ProfilePanelMouseOut"/>
<VisualState x:Name="ProfilePanelMouseDown">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ProfilePanel">
<EasingColorKeyFrame KeyTime="0" Value="#FF404040"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="UserNameTextBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="17.666"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="43"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="43"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ProfilePanelMouseUp">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ProfilePanel">
<EasingColorKeyFrame KeyTime="0" Value="#FF404040"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="UserNameTextBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="18.667"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="45"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="45"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="LynxLogoContainer" StretchDirection="DownOnly" Stretch="Uniform" Height="35" Grid.Column="0" HorizontalAlignment="Left" Margin="15,0,0,0" >
<ContentControl x:Name="MessageAction" Content="{StaticResource Lynx_logo_NoText}" Margin="0,5" />
</Viewbox>
<Grid x:Name="ProfilePanel" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Transparent" MouseLeftButtonDown="ProfilePanel_MouseLeftButtonDown">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:GoToStateAction StateName="ProfilePanelMouseDown"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeftButtonUp">
<ei:GoToStateAction StateName="ProfilePanelMouseUp"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseEnter">
<ei:GoToStateAction StateName="ProfilePanelMouseEnter"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:GoToStateAction StateName="ProfilePanelMouseOut"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="UserNameTextBlock" Grid.Column="0" TextWrapping="WrapWithOverflow" Foreground="Silver"
TextAlignment="Right" FontSize="18.667" HorizontalAlignment="Right"
TextTrimming="CharacterEllipsis" FontFamily="Segoe UI Light" Text="Laurens" />
<WrapPanel x:Name="ProfilePictureContainer" Grid.Column="1" Width="45" Height="45" HorizontalAlignment="Right">
<Image x:Name="ProfilePicture" Source="/Image/JV.jpg" Width="45" Height="45" />
</WrapPanel>
</Grid>
<Popup x:Name="ProfilePopup" Placement="Bottom" PlacementTarget="{Binding ElementName=ProfilePictureContainer}" Height="Auto" Width="Auto"
MinWidth="{Binding ActualWidth, ElementName=ProfilePanel}" MaxWidth="{Binding ActualWidth, ElementName=HeaderContainer}"
VerticalOffset="2" PopupAnimation="Slide" AllowsTransparency="True">
<Border Background="{StaticResource VeryDarkGrey}" BorderThickness="0,2,0,0" BorderBrush="#3C3C3C">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" VerticalAlignment="Top" Margin="0,0,0,5">
<TextBlock Style="{StaticResource ProfileOptionsStyle}" Text="Status: Online" />
<TextBlock Style="{StaticResource ProfileOptionsStyle}" Text="Verander profielfoto" />
</StackPanel>
<StackPanel Grid.Row="1" Margin="0,0,0,3">
<Rectangle HorizontalAlignment="Stretch" Fill="#FF4E4E4E" Height="1" Margin="10,0"/>
<TextBlock Style="{StaticResource ProfileOptionsStyle}" Text="Afsluiten" Margin="5,2,5,0"/>
</StackPanel>
</Grid>
</Border>
</Popup>
</Grid>
This is the code where I open the popup
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace UserControlSolution
{
/// <summary>
/// Interaction logic for ProfileControl.xaml
/// </summary>
public partial class ProfileControl : UserControl
{
public ProfileControl()
{
this.InitializeComponent();
this.ProfilePopup.LostFocus += new RoutedEventHandler(ProfilePopup_LostFocus);
}
void ProfilePopup_LostFocus(object sender, RoutedEventArgs e)
{
ProfilePopup.IsOpen = false;
}
private void ProfilePanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
ProfilePopup.IsOpen = true;
}
}
}

I would handle this by setting the StaysOpen property to false and Binding the Popup.IsOpen property to a bool property and setting the property to false when I need the Popup to close. The problem of trying to do this in the LostFocus event is that the Popup will lose focus even if the user just clicks on a control inside the Popup, as that control will take the focus... I'm guessing that is why your Popup was closing so quickly.
For example, I have a custom AutoCompleteTextBox and that closes the Popup control in various event handlers after a user have selected one of the suggestions:
private void ListBox_PreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)
{
Text = SelectedSuggestion;
if (SuggestionSelected != null) SuggestionSelected(this, new EventArgs());
Focus();
CaretIndex = Text.Length;
IsPopupOpen = false; // <<< Here is the line that closes the Popup
}

Remove left margin/padding in ExpanderView

By default implementing a ExpanderView in an application the UI renders and the expanderView control has this left margin applied to it, some sort of indentation. It's rather stupid really that it's like that by default.
Is there some way to get rid of that margin and just that the control float completely to the left?
Also, how does one add some text to the expanders rectangle? No such property available.

You just need to edit the Control Template for the Expander. If you have Expression Blend it makes it quick and easy. You would just right-click your Expander on the artboard, choose "Edit Template" and then choose to either edit the current one, or a copy you could make and maybe put in a separate resource dictionary. Here's an example template. Notice the 11,0,0,0 Margin on the itemsCanvas towards the bottom? You can use this same method for editing just about any controls template. :)
<Style x:Key="ExpanderViewStyle1" TargetType="toolkit:ExpanderView">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ExpanderView">
<Grid>
<Grid.Resources>
<QuadraticEase x:Key="QuadraticEaseOut" EasingMode="EaseOut"/>
<QuadraticEase x:Key="QuadraticEaseInOut" EasingMode="EaseInOut"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed" GeneratedDuration="0:0:0.15" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0"/>
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded" GeneratedDuration="0:0:0.15" To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame" EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="-35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed"/>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandabilityStates">
<VisualState x:Name="Expandable"/>
<VisualState x:Name="NonExpandable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Line">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NonExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListBoxItem x:Name="ExpandableContent" Grid.ColumnSpan="2" Grid.Column="0" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Row="0" Grid.RowSpan="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0"/>
<ContentControl x:Name="Expander" ContentTemplate="{TemplateBinding ExpanderTemplate}" Content="{TemplateBinding Expander}" Grid.Column="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="11,0,0,0" Grid.Row="1"/>
<Grid x:Name="ExpanderPanel" Background="Transparent" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>
</Grid>
</ListBoxItem>
<Line x:Name="Line" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="2" Stretch="Fill" Stroke="{StaticResource PhoneSubtleBrush}" StrokeThickness="3" X1="0" X2="0" Y1="0" Y2="1"/>
<ContentControl x:Name="NonExpandableContent" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}" Content="{TemplateBinding NonExpandableHeader}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed"/>
<Canvas x:Name="ItemsCanvas" Grid.Column="1" Margin="11,0,0,0" Opacity="0.0" Grid.Row="2">
<Canvas.RenderTransform>
<CompositeTransform TranslateY="0.0"/>
</Canvas.RenderTransform>
<ItemsPresenter x:Name="Presenter"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Either way, once you find the control template its quick and painless. Hope this helps!

It's late but maybe it will help somebody. I remove that margin in this style. I deleted columns from default grid. Moreover I create it as Wrap panel. It can be modified in ItemsPanelTemplate.
<Style x:Key="ExpanderViewStyle" TargetType="toolkit:ExpanderView">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ExpanderView">
<Grid>
<Grid.Resources>
<QuadraticEase x:Key="QuadraticEaseOut" EasingMode="EaseOut"/>
<QuadraticEase x:Key="QuadraticEaseInOut" EasingMode="EaseInOut"/>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed" GeneratedDuration="0:0:0.15" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0"/>
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded" GeneratedDuration="0:0:0.15" To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame" EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="-35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandabilityStates">
<VisualState x:Name="Expandable"/>
<VisualState x:Name="NonExpandable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NonExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListBoxItem x:Name="ExpandableContent" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Row="0" Grid.RowSpan="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0"/>
<ContentControl x:Name="Expander" ContentTemplate="{TemplateBinding ExpanderTemplate}" Content="{TemplateBinding Expander}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="1"/>
<Grid x:Name="ExpanderPanel" Background="Transparent" Grid.Row="0" Grid.RowSpan="2"/>
</Grid>
</ListBoxItem>
<ContentControl x:Name="NonExpandableContent" ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}" Content="{TemplateBinding NonExpandableHeader}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed"/>
<Canvas x:Name="ItemsCanvas" Opacity="0.0" Grid.Row="2">
<Canvas.RenderTransform>
<CompositeTransform TranslateY="0.0"/>
</Canvas.RenderTransform>
<ItemsPresenter x:Name="Presenter"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>