SplitView Pane not shown
Closed this issue · 13 comments
minimalisticMe commented
@ratishphilip first, thank you for this nice toolkit. You answered my question here
However when trying to implement, I got issues with the SplitView Pane.
Assuming the following page called BlurredMenu:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="Assets/dubai_night-1920x1080.jpg" Stretch="UniformToFill" />
<SplitView x:Name="splitview">
<SplitView.Pane>
<Grid>
<local:ImageBloomControl x:Name="BloomControl" ImageSource="ms-appx:///Assets/dubai_night-1920x1080.jpg" BlurAmount="4" Duration="00:00:02" OffsetX="0" OffsetY="100" />
</Grid>
</SplitView.Pane>
</SplitView>
<Grid Background="BlanchedAlmond" Height="48" Width="48" VerticalAlignment="Top" HorizontalAlignment="Left" Tapped="HamburgerGrid_Tapped" />
</Grid>
and the corresponding cs-file:
public sealed partial class BlurredMenu : Page
{
public BlurredMenu()
{
this.InitializeComponent();
this.Unloaded += BlurredMenu_Unloaded;
}
private void BlurredMenu_Unloaded(object sender, RoutedEventArgs e)
{
BloomControl.Dispose();
}
private async void HamburgerGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
splitview.IsPaneOpen = !splitview.IsPaneOpen;
await Task.Delay(300);
if (splitview.IsPaneOpen)
{
BloomControl.Bloom();
}
else
{
BloomControl.Hide();
}
}
Does not show anything. The Pane is just empty. However changing the XAML file to the following (putting the ImageBloomControl outside of the pane) does make a bloom over the whole page.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="Assets/dubai_night-1920x1080.jpg" Stretch="UniformToFill" />
<SplitView x:Name="splitview">
<SplitView.Pane>
<Grid>
</Grid>
</SplitView.Pane>
</SplitView>
<local:ImageBloomControl x:Name="BloomControl" ImageSource="ms-appx:///Assets/dubai_night-1920x1080.jpg" BlurAmount="4" Duration="00:00:02" OffsetX="0" OffsetY="100" />
<Grid Background="BlanchedAlmond" Height="48" Width="48" VerticalAlignment="Top" HorizontalAlignment="Left" Tapped="HamburgerGrid_Tapped" />
</Grid>
So the question here is: can I limit the bloom to the inside of the SplitView?
ratishphilip commented
@minimalisticMe You are using the SplitView incorrectly.
SplitView.Pane hosts the menu items. The ImageBloomControl should be placed in the SplitView.Content.
Have a look at this blog to understand more about SplitView.
minimalisticMe commented
Oh, you're right, I have been using SplitView wrong all along.
But putting the ImageBloomControl into SplitView.Content makes the bloom animation on the content. My intention was to make the bloom animation when I open the SplitView.Pane. To animate the opening of the pane as a bloom animation. So in the end my HambugerMenu has a blurred background (similar to the picture here) and the foreground that is not covered by the SplitView.Pane` is displayed as normal.
ratishphilip commented
ok. I thought you wanted to animate it in the content.
If you want to animate the pane, then you need to derive a new control template from SplitView ControlTemplate). In this template, you need to add an ImageBloomControl whose Bloom() and Hide() methods should be called based on the Visual state of the SplitView. In order to call the Bloom() and Hide() methods from VisualState transition, you need to add two more dependency properties, ShowBloom and HideBloom to ImageBloomControl.
#region ShowBloom
/// <summary>
/// ShowBloom Dependency Property
/// </summary>
public static readonly DependencyProperty ShowBloomProperty =
DependencyProperty.Register("ShowBloom", typeof(bool), typeof(ImageBloomControl),
new PropertyMetadata(false, OnShowBloomChanged));
/// <summary>
/// Gets or sets the ShowBloom property. This dependency property
/// indicates whether to show the bloom or not.
/// </summary>
public bool ShowBloom
{
get { return (bool)GetValue(ShowBloomProperty); }
set { SetValue(ShowBloomProperty, value); }
}
/// <summary>
/// Handles changes to the ShowBloom property.
/// </summary>
/// <param name="d">ImageBloomControl</param>
/// <param name="e">DependencyProperty changed event arguments</param>
private static void OnShowBloomChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var bloomControl = (ImageBloomControl)d;
var oldShowBloom = (bool)e.OldValue;
var newShowBloom = bloomControl.ShowBloom;
bloomControl.OnShowBloomChanged(oldShowBloom, newShowBloom);
}
/// <summary>
/// Provides the class instance an opportunity to handle changes to the ShowBloom property.
/// </summary>
/// <param name="oldShowBloom">Old Value</param>
/// <param name="newShowBloom">New Value</param>
private void OnShowBloomChanged(bool oldShowBloom, bool newShowBloom)
{
if (newShowBloom)
{
Bloom();
}
}
#endregion
#region HideBloom
/// <summary>
/// HideBloom Dependency Property
/// </summary>
public static readonly DependencyProperty HideBloomProperty =
DependencyProperty.Register("HideBloom", typeof(bool), typeof(ImageBloomControl),
new PropertyMetadata(false, OnHideBloomChanged));
/// <summary>
/// Gets or sets the HideBloom property. This dependency property
/// indicates whether the bloom control should be hidden.
/// </summary>
public bool HideBloom
{
get { return (bool)GetValue(HideBloomProperty); }
set { SetValue(HideBloomProperty, value); }
}
/// <summary>
/// Handles changes to the HideBloom property.
/// </summary>
/// <param name="d">ImageBloomControl</param>
/// <param name="e">DependencyProperty changed event arguments</param>
private static void OnHideBloomChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var target = (ImageBloomControl)d;
var oldHideBloom = (bool)e.OldValue;
var newHideBloom = target.HideBloom;
target.OnHideBloomChanged(oldHideBloom, newHideBloom);
}
/// <summary>
/// Provides the class instance an opportunity to handle changes to the HideBloom property.
/// </summary>
/// <param name="oldHideBloom">Old Value</param>
/// <param name="newHideBloom">New Value</param>
private void OnHideBloomChanged(bool oldHideBloom, bool newHideBloom)
{
if (newHideBloom)
{
Hide();
}
}
#endregionHere is a sample modified control template in which the bloom is called when the SplitView transitions from ClosedCompactLeft state to OpenCompactOverlayLeft. You can add/modify additional transitions similar to this.
<Style TargetType="SplitView"
x:Name="BloomSplitViewStyle">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="OpenPaneLength"
Value="{ThemeResource SplitViewOpenPaneThemeLength}" />
<Setter Property="CompactPaneLength"
Value="{ThemeResource SplitViewCompactPaneThemeLength}" />
<Setter Property="PaneBackground"
Value="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SplitView">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DisplayModeStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Closed"
To="OpenOverlayLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35"
KeySpline="0.1,0.9 0.2,1.0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35"
KeySpline="0.1,0.9 0.2,1.0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Closed"
To="OpenOverlayRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Right" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35"
KeySpline="0.1,0.9 0.2,1.0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35"
KeySpline="0.1,0.9 0.2,1.0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="ClosedCompactLeft"
To="OpenCompactOverlayLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35"
KeySpline="0.1,0.9 0.2,1.0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneBloomControl"
Storyboard.TargetProperty="ShowBloom">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="True"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneBloomControl"
Storyboard.TargetProperty="HideBloom">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="False"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="OpenCompactOverlayLeft"
To="ClosedCompactLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneBloomControl"
Storyboard.TargetProperty="ShowBloom">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="False"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneBloomControl"
Storyboard.TargetProperty="HideBloom">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="True"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="ClosedCompactRight"
To="OpenCompactOverlayRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition2"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Right" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLengthMinusCompactLength}" />
<SplineDoubleKeyFrame KeyTime="0:0:0.35"
KeySpline="0.1,0.9 0.2,1.0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="OpenOverlayLeft"
To="Closed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneTransform"
Storyboard.TargetProperty="TranslateX">
<SplineDoubleKeyFrame KeyTime="0:0:0.12"
KeySpline="0.1,0.9 0.2,1.0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLength}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<SplineDoubleKeyFrame KeyTime="0:0:0.12"
KeySpline="0.1,0.9 0.2,1.0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="OpenOverlayRight"
To="Closed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Right" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneTransform"
Storyboard.TargetProperty="TranslateX">
<SplineDoubleKeyFrame KeyTime="0:0:0.12"
KeySpline="0.1,0.9 0.2,1.0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<SplineDoubleKeyFrame KeyTime="0:0:0.12"
KeySpline="0.1,0.9 0.2,1.0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLength}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="OpenCompactOverlayLeft"
To="ClosedCompactLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.12"
KeySpline="0.1,0.9 0.2,1.0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="OpenCompactOverlayRight"
To="ClosedCompactRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition2"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Right" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0"
Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.12"
KeySpline="0.1,0.9 0.2,1.0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLengthMinusCompactLength}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Closed" />
<VisualState x:Name="ClosedCompactLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX"
To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.NegativeOpenPaneLengthMinusCompactLength}"
Duration="0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name="ClosedCompactRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition2"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="2" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Right" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX"
To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLengthMinusCompactLength}"
Duration="0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name="OpenOverlayLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OpenOverlayRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Right" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OpenInlineLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OpenInlineRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition2"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OpenCompactOverlayLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OpenCompactOverlayRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColumnDefinition2"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.CompactPaneGridLength, FallbackValue=0}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Right" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition1"
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneGridLength, FallbackValue=0}" />
<ColumnDefinition x:Name="ColumnDefinition2"
Width="*" />
</Grid.ColumnDefinitions>
<!-- Content Area -->
<Grid x:Name="ContentRoot"
Grid.ColumnSpan="2">
<Border Child="{TemplateBinding Content}" />
<Rectangle x:Name="LightDismissLayer"
Fill="Transparent"
Visibility="Collapsed" />
</Grid>
<!-- Pane Content Area-->
<Grid x:Name="PaneRoot"
Grid.ColumnSpan="2"
HorizontalAlignment="Left"
Visibility="Collapsed"
Background="{TemplateBinding PaneBackground}"
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}">
<Grid.Clip>
<RectangleGeometry x:Name="PaneClipRectangle">
<RectangleGeometry.Transform>
<CompositeTransform x:Name="PaneClipRectangleTransform" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</Grid.Clip>
<Grid.RenderTransform>
<CompositeTransform x:Name="PaneTransform" />
</Grid.RenderTransform>
<local:ImageBloomControl x:Name="PaneBloomControl"
Width="{Binding ElementName=PaneRoot, Path=Width}"
Height="{Binding ElementName=PaneRoot, Path=ActualHeight}"
ImageSource="ms-appx:///Assets/Images/Image3.jpg"
BlurAmount="4"
Duration="00:00:00.75"
OffsetX="0"
OffsetY="100"></local:ImageBloomControl>
<Border Child="{TemplateBinding Pane}"
Background="Transparent" />
<Rectangle x:Name="HCPaneBorder"
x:DeferLoadStrategy="Lazy"
Visibility="Collapsed"
Fill="Transparent"
Width="1"
HorizontalAlignment="Right" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>juanpaexpedite commented
After half an hour to compile (At the end I downloaded CompositionExpressionToolkit and compiled it because I was not able to get from NuGet) I added the whole code about the ImageBloomControl.
Then tested just plug and play, it is curious that it does not appear on the Pane even forcing its size, I will check why is needed the workaround to insert in the template. (because both sections use Child="{TemplateBinding X}")
And then when I add the ImageBloomControl in the Content of the SplitView and I expand the Pane, the ImageBloomControl is over the Pane. I will also take a deep look on that.
Would you confirm that at the moment there is not a NuGet release package of the CompositionExpressionToolkit ?
ratishphilip commented
CompositionExpressionToolkit was merged with CompositionProToolkit in v0.4.5.
If you install the latest CompositionProToolkit library, you will get all the APIs defined in CompositionExpressionToolkit under the CompositionProToolkit.Expressions namespace.
ImageBloomControl is not part of CompositionProToolkit yet. That was just a sample control I created. I may optimize it further and add it to CompositionProToolkit in the future.
Right now I am preoccupied with other new controls.
ratishphilip commented
@juanpaexpedite
ImageBloomControl will appear in the Pane by making changes to the ControlTemplate of SplitView (as describe in my comment above).
Here is a sample
juanpaexpedite commented
Ups, sorry and thank you I was just assuming that was needed. Yes do not worry I copied the ImageBloomControl from your great answer example.
ratishphilip commented
No problem. Glad it was helpful.
minimalisticMe commented
@ratishphilip I'm sorry, now I must back off a little. The most styling I did was modifying Templates via Blend and then put them into a resource file and use them in my apps. How would I implement the code behind?
I was putting the long Style code into a new Resource Dictionary File called Dictionary1.xaml, like I would naturally do. But where does the c# code belong? Putting it into a Control Template:
public sealed class CustomControl1 : SplitView
{
public CustomControl1()
{
this.DefaultStyleKey = typeof(CustomControl1);
}
...
fails, as I cannot reference to the BloomSplitViewStyle. After some research, I think, I have to put
[TemplatePart(Name = BloomSplitViewStyle, Type = typeof(SplitView))]
above the public sealed class CustomControl1 : SplitView line. I have never been working with those attributes and my approach seems to be wrong, so I'm not sure, how to proceed now.
ratishphilip commented
@minimalisticMe
You need not derive a new control from SplitView. Just add the new style to your Dictionary1.xaml and use it.
The code which I specified (for ShowBloom and HideBloom) must be added to the ImageBloomControl's existing code.
Now you can specify the SplitView in your XAML to use the BloomSplitViewStyle in the normal way
<SplitView Style="{StaticResource BloomSplitViewStyle}"
...minimalisticMe commented
@ratishphilip wow, this is really cool! It works and I will later adapt it to expand from DisplayMode="CompactInline". But for now I have two further questions. You set the image via URI in the Style and in the code with
// Load the image
var uri = ImageSource;
var imageSurface = await _generator.CreateImageSurfaceAsync(uri, _layer.Size.ToSize(), ImageSurfaceOptions.Default);
blurBrush.SetSourceParameter("image", _compositor.CreateSurfaceBrush(imageSurface.Surface));
My questions:
- How can I set the Image Property
StretchtoUniformToFill? The code now sets it toUniform(default, I guess). - Is it possible to pass an Image that is not provided by URI, but rather as BitmapImage or WriteableBitmap?
ratishphilip commented
@minimalisticMe
Sorry for the late reply.
- For this you have to update the ImageBloomControl's code to this
var uri = ImageSource;
var imageOptions = ImageSurfaceOptions.Default;
imageOptions.Stretch = Stretch.UniformToFill;
imageOptions.AutoResize = false;
var imageSurface =
await _generator.CreateImageSurfaceAsync(uri, _layer.Size.ToSize(), imageOptions);
blurBrush.SetSourceParameter("image", _compositor.CreateSurfaceBrush(imageSurface.Surface));The ImageSurfaceOptions set the options for the ImageSurface.
As for question no. 2, Right now the ImageSurface only accepts Uri. Will be adding the feature to accept byte[] in future release.
minimalisticMe commented
@ratishphilip thank you very much for the response.
I additionally added the line imageOptions.HorizontalAlignment = AlignmentX.Left; to your code. And now am happy to tell you, that everything works fine.
I would love to see byte[] to be coming and when I may suggest another improvement:
Automatically check, if the component was re-sized (e.g. due a re-size of the parent window) and then call bloom().