Looking for help on how to animate the entrance/exit of a Popup. Haven't found any examples specific to using a StoryBoard for this--does anyone know of one?
I found this question:
Can't get any Transitions to work with Popup in UWP. An answer there links to some intriguing articles, which leads to Animating pop-up UI. There's a link to a "XAML personality animations sample", which shows how to use a StoryBoard to customize the animation, but it looks like that sample is gone.
The sample you mentioned is a Windows 8 sample. You could now find it here:XAML personality animations sample.
If you want to animate the PopUp, you will need to add the PopInThemeAnimation and PopOutThemeAnimation in the resources of the PopUp. Then call the animation to begin when you show the PopUp. I've made a simple demo about this.
XAML:
<Grid>
<StackPanel>
<Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked" ToolTipService.ToolTip="Simple ToolTip"/>
</StackPanel>
<Popup VerticalOffset="100" HorizontalOffset="100" x:Name="StandardPopup">
<!--add the animataion for PopUp-->
<Popup.Resources>
<Storyboard x:Name="PopInStoryboard">
<PopInThemeAnimation Storyboard.TargetName="StandardPopup" FromHorizontalOffset="500"/>
</Storyboard>
<Storyboard x:Name="PopOutStoryboard">
<PopOutThemeAnimation Storyboard.TargetName="StandardPopup" />
</Storyboard>
</Popup.Resources>
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="200" Height="200">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center"/>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</Popup>
</Grid>
Code-behind:
private void ClosePopupClicked(object sender, RoutedEventArgs e)
{
//disappear
PopOutStoryboard.Begin();
}
// Handles the Click event on the Button on the page and opens the Popup.
private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)
{
PopInStoryboard.Begin();
// open the Popup if it isn't open already
if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }
}
Related
I have a button inside a Grid container that is inside a ScrollViewer Container.
When I double click the button to auto fill the button click code in c# I get no references.
<ScrollViewer x:Name="_scroll">
<Grid Height="584">
<Button x:Name="n_one" Content="N" HorizontalAlignment="Left" Margin="134,165,0,0" VerticalAlignment="Top" Width="30" FontSize="18" FontWeight="Bold" Height="23"/>
</Grid>
</ScrollViewer>
There is more stuff in the Grid Container but they are just labels and buttons. They other elements in the container aren't suffering from the same issue.
private void n_one_Click(object sender, RoutedEventArgs e)
{
Console.WriteLine("Working")
}
I do have the Console setup and working shown with previous code. Visual Studio is telling me i have 0 references to n_one_Click why is this?
If this changes anything, I did copy this button a few times, I did rename these buttons, but they also have the same problem, elements that aren't related but still in the same container aren't affected.
If you really want the n_one button to fire your n_one_Click method, I would expect your XAML to look like this:
<ScrollViewer x:Name="_scroll">
<Grid Height="584">
<Button
x:Name="n_one"
Content="N"
Click="n_one_Click" <========== Here
HorizontalAlignment="Left"
Margin="134,165,0,0"
VerticalAlignment="Top"
Width="30"
FontSize="18"
FontWeight="Bold"
Height="23"/>
</Grid>
</ScrollViewer>
I have an UWP app in Microsoft/Windows Store, and I want to add a popup. This popup appears when I click a button. Is it possible for the popup to have the Fluent Design System (transparent background)?
Yes, it is. The following example, is taken from their Microsoft's Popup class documentation, here:
Code-Behind:
// Handles the Click event on the Button inside the Popup control and
// closes the Popup.
private void ClosePopupClicked(object sender, RoutedEventArgs e)
{
// if the Popup is open, then close it
if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; }
}
// Handles the Click event on the Button on the page and opens the Popup.
private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)
{
// open the Popup if it isn't open already
if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }
}
XAML:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
<StackPanel>
<Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked"/>
</StackPanel>
<Popup VerticalOffset="10" HorizontalOffset="200" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="200" Height="200">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center"/>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</Popup>
</Grid>
By simply changing the Background dependency property of the Border object from:
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
to
Background="{StaticResource NavigationViewExpandedPaneBackground}"
your Popup will be set with an Acrylic Background (this one is an Acrylic Brush resource in the template of the NavigationView defined for one of its visual state).
Or you can always create your own Acrylic Brush resource:
<Grid.Resources>
<AcrylicBrush x:Name="myacrylicbrush" BackgroundSource="HostBackdrop"
TintColor="#FF0000FF"
TintOpacity="0.4"
FallbackColor="#FF0000FF"/>
</Grid.Resources>
And with this you can set the Border Background property to your custom resource, like this:
Background="{StaticResource myacrylicbrush}"
And adjust the settings to get the look your are striving for.
BackgroundSource is set to HostBackDrop, to use your Background Acrylic, the Tint overlay layer is set to a value which will be rather transparent, while the TintColor is set to full opaque blue.
Result:
If you want to define the Background property as an Acrylic brush of any control, if you are targeting an app with Falls Creator update, I think the question should probably be the other way around: Where am I not able to utilize the new released features?
I'm working with a SplitView application, and I've created a Shell that hosts the subpages. What I'd like to do is have a button on a subpage that when clicked, can manipulate the visibility of objects originally initiated or created on the Shell xaml. But, I'm not sure how to call the class or frame necessary to change attributes on the SplitView.
My hierarchy is as follows: Shell > Pages Folder > Sub Pages
Here's the snippet from my Shell.xaml Mind you this is only a portion contained within the SplitView
<SplitView.Pane>
<StackPanel x:Name="SplitViewPanePanel">
<RadioButton x:Name="BackRadioButton" Click="BackRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Background="Gray" Content="Back" GroupName="Back"/>
<RadioButton x:Name="HamburgerRadioButton"
Click="HamburgerRadioButton_Click"
Style="{StaticResource NavRadioButtonStyle}"
Tag=""
Content="Menu" />
<RadioButton x:Name="HomeRadioButton" Click="HomeRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Home" GroupName="Navigation"/>
<RadioButton x:Name="TARadioButton" Click="MTRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Team Assignments" GroupName="Navigation"/>
<RadioButton x:Name="ASRRadioButton" Click="ASRRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Assignment Switch Requests" GroupName="Navigation"/>
<RadioButton x:Name="MTRadioButton" Click="MTRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Management Tools" GroupName="Navigation"/>
</StackPanel>
</SplitView.Pane>
Below is the code from my "Home" page inside the Pages folder.
using Team_Management_Hub;
using Team_Management_Hub.Pages;
namespace Team_Management_Hub.Pages
{
public sealed partial class Home : Page
{
public Home()
{
this.InitializeComponent();
}
private void TestButton_Click(object sender, RoutedEventArgs e)
{
//Here is the button I want to be able to click to alter the visibility of the MTRadioButton
}
}
}
I've looked for a couple days now for examples or explanations on how to access the parent Shell, and I can't seem to figure it out. It should be noted that this is my first UWP in Windows 10, and I'm fairly new to C#.
Additionally, if it helps or is relevant, the below code is inside the Shell.xaml.cs file that I use to navigate to individual Pages.
private void HomeRadioButton_Click(object sender, RoutedEventArgs e)
{
var frame = this.DataContext as Frame;
Page page = frame?.Content as Page;
if (page?.GetType() != typeof(Home))
{
frame.Navigate(typeof(Home));
}
}
UPDATE:
So, I've implemented some changes from the first answer provided, and I seem to have something incorrect with my scope inside the Shell.xaml file.
Here's my Shell.xaml file:
<Page
x:Class="Team_Management_Hub.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Team_Management_Hub"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:pages="using:Team_Management_Hub.Pages"
mc:Ignorable="d">
<pages:Home MyCoolEvent="OnCoolEvent"/>;
<SplitView x:Name="Team_Management_Hub" Background="Black" OpenPaneLength="240" CompactPaneLength="48"
DisplayMode="CompactOverlay" IsPaneOpen="False" PaneBackground="Gray" Content="{Binding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="HardwareButtons">
<VisualState.Setters>
<Setter Target="BackRadioButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<SplitView.Pane>
<StackPanel x:Name="SplitViewPanePanel">
<RadioButton x:Name="BackRadioButton" Click="BackRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Background="Gray" Content="Back" GroupName="Back"/>
<RadioButton x:Name="HamburgerRadioButton" Click="HamburgerRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Menu" />
<RadioButton x:Name="HomeRadioButton" Click="HomeRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Home" GroupName="Navigation"/>
<RadioButton x:Name="TARadioButton" Click="TARadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Team Assignments" GroupName="Navigation"/>
<RadioButton x:Name="ASRRadioButton" Click="ASRRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Assignment Switch Requests" GroupName="Navigation"/>
<RadioButton x:Name="MTRadioButton" Click="MTRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="" Content="Management Tools" GroupName="Navigation"/>
</StackPanel>
</SplitView.Pane>
</SplitView>
With this, everything under <pages:Home MyCoolEvent="OnCoolEvent"/> gets underlined blue, and the error "the property Content is set more than once"
I found this link and so I tried to implement putting it all in a grid, but when I simply add <Grid> above the <SplitView> and below the final </SplitView> if I keep the <pages> portion above the splitview, the button on the Home.xaml page doesn't do anything. If I move the <pages> to below the <SplitView> but still inside the <Grid></Grid> the button works, but the SplitView disappears. I also tried throwing the <pages> inside the <StackPanel> that holds my RadioButtons, but it does something weird, where it appears my Home Page is inside the SplitView Pane under the buttons. So, I'm sure I've got some simple mistake I'm making with the scope of the xaml setup, but I've tried so many combinations of placing the <pages:Home> in so many different areas and inside different controls, and I haven't gotten it to work. So, some help on the proper layout to make this work, would be great.
Thanks for any help.
A very simply approach would be to add an event to your Home class. When the TestButton is clicked fire the event. You would then listen for the event on your "shell" page.
example shell xaml:
<pages:Home MyCoolEvent="OnCoolEvent"/>
example shell code
private void OnCoolEvent(object sender, EventArgs args)
{
//alter the visibility of the MTRadioButton
}
Home code:
public event EventHandler MyCoolEvent;
private void TestButton_Click(object sender, RoutedEventArgs e)
{
OnMyCoolEvent();
}
protected virtual void OnMyCoolEvent()
{
EventHandler handler = MyCoolEvent;
if (handler != null) handler(this, EventArgs.Empty);
}
I am currently working on Windows Universal Apps.In that there is requirement to show menu from left side when User clicks on menu icon. I want add a ListView inside it and handle the selectionchanged event based on user's selected item. Now, the problem with Flyout is that it opens like a popup on clicking the icon but what I actually want to do is it should come from left side of the window .For e.g in Gmail application of android. Please can anyone suggest how to achieve this. Please find below my code which I added in Flyout below:
<Image Source="ms-appx:///Images/menu_image.png"
HorizontalAlignment="Left"
Tapped="Image_Tapped"
Width="60"
Height="90"
Grid.Column="0"
VerticalAlignment="Center">
<FlyoutBase.AttachedFlyout>
<Flyout>
<Grid x:Name="SettingsPane"
Background="{StaticResource AppBackGroundColor}"
Grid.Row="0"
Width="380">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EdgeUIThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Margin="8">
<TextBlock Name="SidebarTitletxtblk"
FontSize="25"
TextWrapping="Wrap"
Style="{StaticResource BaseTextBlockStyle}" />
</StackPanel>
<ListView Grid.Row="1"
x:Name="LocationPickerList"
SelectionChanged="LocationPickTypeSelected"
Margin="0,10,0,0"
ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
ItemTemplate="{StaticResource LocationPickerListItemTemplate}"></ListView>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Image>
You can't override the Flyout's standard transition. If you want to apply something else then you can use a Popup instead and customize it however you'd like. To have it slide in from the left apply an EdgeUIThemeTransition (if it's short) or a PaneThemeTransition (if it's full height) with Edge=Left.
For example:
<Popup x:Name="flyoutPane" IsOpen="False" IsLightDismissEnabled="True"
Width="320" HorizontalAlignment="Left">
<Popup.ChildTransitions>
<TransitionCollection>
<!--<EdgeUIThemeTransition Edge="Left" />-->
<PaneThemeTransition Edge="Left" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="380" Height="{Binding ElementName=flyoutPane, Path=Height}" Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
<TextBlock Text="Grid contents here" />
</Grid>
</Popup>
And trigger it from your Button Click (your Image sounds like it should be a Button rather than using Tap, unless you have an alternate keyboard method - you can template off the button look while keeping the button semantics).
private void Button_Click(object sender, RoutedEventArgs e)
{
// Height is only important if we want the Popup sized to the screen
flyoutPane.Height = Window.Current.Bounds.Height;
flyoutPane.IsOpen = true;
}
If you're doing many of these you can create a custom control with an attached property similar to FlyoutBase.AttachedFlyout.
I have use the following code snippet to define the Popup.
Code snippet[XAML]:
<Grid Margin="0,0,0,0" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="19" />
<ColumnDefinition Width="19" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Stretch"
Text="HeaderText"
FontWeight="Bold"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"/>
<Grid Grid.Column="1">
<Button Width="19" x:Name="FilterButton" Click="FilterButton_OnClick" Content="^"/>
<Popup x:Name="FilterPanel" StaysOpen="False" >
<Border >
<Grid>
<TextBlock x:Name="tblTitle" Text="PopUp Header" Background="Red" Grid.Column="0" Grid.Row="0"/>
</Grid>
</Border>
</Popup>
</Grid>
<TextBox Text="Test" Grid.Column="2"/>
</Grid>
I have use the following code snippet to open the popup
Code snippet[C#]:
private void FilterButton_OnClick(object sender, RoutedEventArgs e)
{
this.FilterPanel.IsOpen = true;
}
Scenorio:
Open the popup using button click.
Press Tab.
Focus move to TextBox.
Actual Behavvior:
Popup does not close.
Expected Behavior:
Popup should be closed.
For your reference here I have attached the simple sample .Can you please any look into this and provide guidance to archive my requirement. Thanks in advance.
This is very strange. I took your code and pasted it in a new project window and popup closed every time. However I remember when I wanted to create my own custom control I had a similar issue. I know one of the things is to set StaysOpen to false. This I see you have already done. Another is try to setting the following when FilterPanel is initialized
FilterPanel.IsMouseCaptureWithinChanged +=FilterPanel_IsMouseCaptureWithinChanged;
void FilterPanel_IsMouseCaptureWithinChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (!(bool)e.NewValue)
{ FilterPanel.IsOpen = false; }
}
As I said my code worked perfectly when I copied your code, so I couldn't test it, but the above should work.