I'm attempting to make a translusent popup that covers the entire screen using WPF. The idea is to effectively create the light box style effect that we all see regularly when using assorted webpages.
The application runs full screen (no option to close, minimise, etc) and replaces the windows shell. Because of this the window needs to stretch to cover the entire of the screen.
The desired effect is to have a new window pop up covering the full screen. This window will have a translucent background with some central content that will be completely opaque. Interaction with the central content will be the only way for the user to interact with the application.
The problem that I am facing is the when AllowsTransparency is set to False the Window is not transparent, as you would expect. But when I set AllowsTransparency="True" then the window and all its contents (including the central content) is completely transparent. The new window, while invisible is there and is stopping any interaction with they system.
Has any one else encountered this problem, of windows not being visible at all when AllowsTransparence="true" is set, or even better found a solution or work around for it?
The xaml for the window is:
<Window x:Class="Views.BorderedPopupView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Background="{DynamicResource WindowBackground}" AllowsTransparency="True">
<Window.Resources>
<SolidColorBrush x:Key="TranslusentBrush" Opacity="0.1"/>
<SolidColorBrush x:Key="WindowBackground" Color="Transparent"/>
</Window.Resources>
<Viewbox StretchDirection="Both" Stretch="Fill" Margin="5,0,13,-8" >
<Grid Height="768" Width="1024" Background="{StaticResource TranslusentBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="6*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Opacity="1" Grid.Row="1" Grid.Column="1">
<ContentControl x:Name="Popup" Grid.Row="1" Grid.Column="1"/>
</Grid>
</Grid>
</Viewbox>
</Window>
I ran into something similar the other day. For some reason when you set AllowsTransparency="True" you must also specify a Width and a Height for the Window otherwise the whole thing becomes invisible.
I did the same thing you did and also set the WindowState to Maximized but the Window was no where to been seen until I specified a Width and Height.
Your Grid is appearing above your other elements in the z-order, so clicks will be intercepted by it. To turn hit testing off for that Grid, set IsHitTestVisible="false".
If you would not resize your window try set ResizeMode="CanResizeWithGrip" or ResizeMode="NoResize" to window.
Related
Following XAML in this Microsoft tutorial is showing too much gap between the top edge of the parent window and the UWP user control. Question: How can we make the user control align to the top edge of parent window? Remark: The VerticalAlignment="Top" in the StackPanel below does not help. This question is something similar to this post but in a different context.
<UserControl
x:Class="ClassLibUWP_inside_WPF.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClassLibUWP_inside_WPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
d:DesignWidth="400" Height="329">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="211*"/>
<ColumnDefinition Width="189*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="LightCoral" Grid.ColumnSpan="2">
<TextBlock>This is a simple custom UWP control</TextBlock>
<Rectangle Fill="Blue" Height="93" Width="100"/>
<TextBlock Text="{x:Bind XamlIslandMessage}" FontSize="50"></TextBlock>
<winui:RatingControl Height="32" />
</StackPanel>
</Grid>
</UserControl>
When you run the app built in the above tutorial, you get the following screen showing the above UWP user control:
I would instead like to display it as follows [notice about no gap between window title and the red stack panel]:
The UserControl has a fixed height that is smaller than the height of the window and thus is vertically centered in the window. Setting VerticalAlignment="Top" on the WindowsXamlHost should give what you want.
Once I run the program, it opens a UserControl in my MainWindow. The UserControl is a Menu consisting of 3 buttons.
Image of the UserControl:
Menu
The code behind Main Window:
<Window
...
Title="MainWindow" Height="350" Width="525" SizeToContent="WidthAndHeight" >
<Window.DataContext>
<ViewModels:MainWindowViewModel />
</Window.DataContext>
<ContentControl Content="{Binding CurrentViewModel}"/> //Inserts a UserControl
The code behind Menu UserControl:
<UserControl
...
d:DesignHeight="90" d:DesignWidth="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100*"/> //Problem
<RowDefinition Height="100*"/>
<RowDefinition Height="100*"/> //Problem
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Margin="30,0" Content="First" Command="{Binding DataContext.SwitchToNextUserControl,
RelativeSource={RelativeSource AncestorType={x:Type local:MainWindow}}, Mode=OneWay}" />
<Button Grid.Row="1" Grid.Column="1" Margin="30,0" Content="Second"/>
<Button Grid.Row="1" Grid.Column="2" Margin="30,0" Content="Third"/>
</Grid>
THE PROBLEM:
Once the menu is opened, the empty rows (those without buttons, first and third) get collapsed (or just height to 0?), as shown: Running program
I can get over it with setting MinHeight for every row, but it works only on pixels. I'd like them to work in the method of stars ("*"). I guess I could set their height from code behind (using stars), but just the thought of it makes me feel like I rub my right ear with left hand.
Also, once I click on the "First" button, some other UserControl is opened in the window, instead of the "Menu" one, and its rows are also collapsed. Just mentioning it.
So the question is, what should I do to make my UserControls appear just as they look in designer?
You should remove to SizeToContent="WidthAndHeight" from your window XAML.
This causes the height of the window to shrink to fit the size of the UserControl (and effectively the height of the middle Button).
TI'm having some trouble getting my Window to be Transparent.
The Window is defined below:
<Window x:Class="HKC.Desktop.Views.UserInterfaces.RemoteKeypad"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Closing="Window_Close"
KeyDown="RemoteKeypad_KeyDown"
KeyUp="RemoteKeypad_KeyUp" MouseDown="OnMouseDown_Event"
Title="Title" Width="325" Height="370"
ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
I then have a border defined to give a curved edge to the Window, with a Grid inside for layout purposes:
<Border CornerRadius="20" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border.Effect>
<DropShadowEffect BlurRadius="6" ShadowDepth="3" Color="#484948" />
</Border.Effect>
<Grid Background="Transparent" VerticalAlignment="Stretch">
....
</Grid>
</Border>
</Window>
For some reason, the first time that I open the window the background is not transparent
However, If I click away from the Window, back back on it, the transparency is working as expected.
Turns out the problem was with an external tool for adding Drop Shadows to elements.
I've got a user control that I'm loading into a Window dynamically - I wanted to set the Window so that it didn't have a size and then I thought the window to resize accordingly depending on the UserControl. However it dosn't - can anyone assist please?
I've made a very basic example - I've cut out the dynamic bits and just put a UserControl in a Window. What do I need to do to get the window to be tight around the UserControl?
Thanks,
Andy
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" Background="LightBlue">
<Grid>
</Grid>
</UserControl>
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WpfApplication1="clr-namespace:WpfApplication1" Title="Window1" >
<Grid>
<WpfApplication1:UserControl1>
</WpfApplication1:UserControl1>
</Grid>
</Window>
Try setting SizeToContent to WidthAndHeight on your Window.
See MSDN Page
Try setting either Width and Height to Auto, or setting SizeToContent = WidthAndHeight.
Once you know the size of the control, you will then have to update the size of the window. I'm unsure of any way to force the window to resize itself automatically unless you have code doing it.
Check this out for all you need to know, plus some, in order to do this.
Not sure if this will help, but I'd start by making the Window :
Height="Auto" Width="Auto"
If this alone doesn't do the trick I would add a Grid Row and Column
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
And then I would set the
<WpfApplication1:UserControl1 Grid.Row="0" Grid.Column="0" />
Not 100% sure if this will work but its worth a try as this is what I'm doing on my side and it works.
I have been trying hours to create a page (Axml) in expression blend that stays in the center of the browser yet equally reduces the white space on either side when the browser window is resized. And example is this site or most decent site on the net.
Love a code example or link. Thanks
After posting this question I immediately worked it out. Ends up being really simple in Silverlight. I was making it hard for myself.
Makte your grid the same size as your layout grid and remove width and height properties for the User Control.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication2.Page"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
>
<Grid x:Name="LayoutRoot" Background="White" Width="597.5" Height="532">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="509" Margin="8.5,0,0,23" Width="579">
<Rectangle Height="65" Margin="0,8,0,0" VerticalAlignment="Top" Fill="#FFD64141" Stroke="#FF000000" HorizontalAlignment="Stretch"/>
</Grid>
</Grid>
</UserControl>