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?
Related
I've got a little bit problem with sending my layout object. I'm trying to create an WPF app in style like a chrome with draggable cards. To do this, I'm using OpenControls.Wpf library + Prism + MahApps.Metro
Layout declarated in main xaml view
<dockManager:LayoutManager x:Name="_layoutManager" Grid.Row="1" Grid.Column="0"
DocumentsSource="{Binding Documents}" ToolsSource="{Binding Tools}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" UseLayoutRounding="False"
Margin="0,-4,0,0">
<dockManager:LayoutManager.Theme>
<themes:ModernTheme/>
</dockManager:LayoutManager.Theme>
<dockManager:LayoutManager.DocumentTemplates>
<DataTemplate DataType="{x:Type usViewModel:UsersModule_ViewModel}" >
<usViews:UsersModule_View x:Name="UsersModuleModule" Margin="4"/>
</DataTemplate>
</dockManager:LayoutManager.DocumentTemplates>
</dockManager:LayoutManager>
Buttons to open projects in card in the same xaml file
<StackPanel>
<Button x:Name="myButton" Style="{StaticResource ButtonMore}" Content="Users"
Command="{Binding LoadModule1Command}"
CommandParameter="{Binding ElementName=_layoutManager}"
HorizontalAlignment="Left" Margin="24,80,24,0" VerticalAlignment="Top" Width="208" Height="40"/>
</StackPanel>
By the DelegateCommand { get; private set; } in my module, through the button CommandParameter is sending an layoutManager object. I need to get that object, but without click any button or textbox.
So my main question:
Is it possible, to send an object without any buttons or is it possible to programmatically call of the click event in WPF.
I've search something about that problem, but did not find any solution.
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; }
}
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 XAML:
<Grid MouseMove="onMouseMove" >
<ItemsControl Name="btnTableImageList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Content}"
Height="{Binding Height}"
Width="{Binding Width}"
Tag="{Binding Tag}"
Margin="{Binding Margin}"
Background="{Binding Background}"
HorizontalAlignment="Center"
MouseDown="tblButton_MouseDown"
MouseUp="tblButton_MouseUp"
Click="ClickHandlerTableBtn"
TextBlock.TextAlignment="Center" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
And code behind:
private void onMouseMove(object sender, MouseEventArgs e)
{
lblCoord.Content = Mouse.GetPosition(Application.Current.MainWindow);
}
On the form there is Label named lblCoord, and there are two buttons that are created after form is loaded.
I want to display mouse coordinate in lblCoord in relation to the Grid, but coords are displayed only when i move mouse cursor over any of the buttons that are placed inside that grid.
My guess is that I am placing MouseMove="onMouseMove" in wrong place.
Thanks for your help.
It will work when you set Background of Grid to anything but Transparent
As default, Grid's background is transparent. When it is transparent, mouse events work when you set Background="Transparent" too.
Mouse events handled nearest parent element with background IMHO
I'm working with the MapControl from the new api for the Windows Phone 8.1 WinRT. What I'm trying to achieve is to display a simple tooltip right above the tapped pushpin (with additional information about the pushpin location). Preferably I'd like that tooltip to be a UserControl.
Sadly there's no built-in support from api, neither simple solution for that in web. So far people used to use a ContextMenu feature found in WindowsPhoneToolkit library, unfortunatelly it's Silverlight-only. Flyout is also not an option. ToolTipService also doesn't work properly.
What I've done so far is to hook up into a pushpin's Tapped event, and then, in code-behind, add a child to the pushpin's Grid - but it it doesn't look like a good option, and it makes my pushpin move.
Code XAML:
<maps:MapControl x:Name="Map">
<maps:MapItemsControl ItemsSource="{Binding Pushpins}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="MyGrid"
Tapped="UIElement_OnTapped">
<Grid.RowDefinitions>
<RowDefinition Height="*" /> // if grid is tapped I will insert a UserControl to that row
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="1"
Width="24"
Height="24"
Source="{Binding Converter={StaticResource PushpinLogoConverter}}"
maps:MapControl.Location="{Binding Location}"
maps:MapControl.NormalizedAnchorPoint="1,0.5" />
</Grid>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
Code behind:
private void UIElement_OnTapped(object sender, TappedRoutedEventArgs e)
{
var grid = (Grid)e.OriginalSource;
var tooltipBase = new TooltipBase();
grid.Children.Add(tooltipBase);
tooltipBase.SetValue(Grid.RowProperty, 0);
}
Can you tell me if there's a better way to do it? How to make MyGrid not to move when I add a children to it? Thanks in advance for any help, I really appreciate it!
Just create a UserControl with a PushPin Icon and a Grid above it with a simple TextBox inside.
Make the Grid invisible by default, and make it Visible once the user click on the pushpin to show all the data that you want.
<Grid>
<Ellipse Fill="#FFF4F4F5"
HorizontalAlignment="Center"
Height="50"
Stroke="Black"
VerticalAlignment="Center"
Width="50"
Tapped="Ellipse_Tapped"/>
<Grid x:Name="locationInfoGrid"
Margin="0,-100,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="100"
Height="100"
Background="#FFB4B4B4">
<TextBlock x:Name="locationInfo"
FontSize="14"/>
</Grid>
</Grid>
Code Behind:
private void Ellipse_Tapped(object sender, TappedRoutedEventArgs e)
{
locationInfo.Text = "Location info here";
if (locationInfoGrid.Visibility == Visibility.Visible)
locationInfoGrid.Visibility = Visibility.Collapsed;
else
locationInfoGrid.Visibility = Visibility.Visible;
}
Then simply add the UsercControl to your Map at the specific location.
private async void Button_Click(object sender, RoutedEventArgs e)
{
MyUserControl1 uc = new MyUserControl1();
MyMap.Children.Insert(0, uc);
MapControl.SetLocation(uc, location);
MapControl.SetNormalizedAnchorPoint(uc, new Point(0.5, 1));
}