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>
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.
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.
Can someone please tell me why, even though I've set my Window to SizeToContent and my content is Width=40 does the app load bigger across the Width?
The following example sizes to height, but the width is about 100 pixels (estimation).
Thanks
<Window x:Class="WpfApplication2.RetailButs"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RetailButs" SizeToContent="WidthAndHeight"
WindowStyle="None" MinWidth="0" >
<Grid x:Name="LayoutRooty" Width="40" Height="40">
<Border x:Name="LayoutRootx" Background="White" BorderBrush="Black" CornerRadius="8" BorderThickness="4" >
</Border>
</Grid>
</Window>
The extra size you have got comes from 3 top right window buttons.
So the best solution is just take buttons out (1) and put some minimum size for the window (2).
Try this and it will be exactly what you need.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="40" Height="40" SizeToContent="WidthAndHeight" WindowStyle="None" ResizeMode="NoResize">
<Grid x:Name="LayoutRooty" Width="40" Height="40">
<Border x:Name="LayoutRootx" Background="White" BorderBrush="Black" CornerRadius="8" BorderThickness="4" >
</Border>
</Grid>
</Window>
There was a similar question recently which i was unable to find. The size is that which would be needed if the WindowStyle were the default 3D border with all the buttons which take up a lot of space. I think there is some way to update the layout, maybe you can figure something out.
Edit: Set the window's Width="0" (or any other value for that matter) and it should update correctly. The size to content will override the value.
(If you set the WindowStyle to ToolWindow it always fits correctly)
I wanted a <Border> around my <Image> - sounds simple enough. but I could never get it to appear. I eventually made it "Red" with "BorderThickness=20" - then it was obvious that it was going around the entire "LayoutRoot"! Something like:
<UserControl x:Class="BorderCrossing.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Margin="10" Background="Black">
<Border Canvas.ZIndex="1" Background="White" HorizontalAlignment="Center" Opacity=".5" VerticalAlignment="Top">
<TextBlock x:Name="idTextBlock" FontSize="20" FontWeight="Bold" Foreground="Black" Text="ID Here" />
</Border>
<Border Canvas.ZIndex="1" Background="Blue" BorderThickness="5" BorderBrush="AntiqueWhite">
<Image x:Name="thumbnailImage" Height="100" Width="100" Stretch="Uniform" />
</Border>
</Grid>
In order to "fix" this, I found that adding 'HorizontalAlignment="Left" VerticalAlignment="Top"' to the <Border> placed the border around the <Image>, as desired. I also found that I could enclose the <Border> in a <Canvas> and achieve a similar result.
What is going on? Can someone explain this in a way that will prevent my "wonder" in the future?
Thanks,
David
The default for VerticalAlignment and HorizontalAlignment is "Stretch", so the Border stretches to the entire available space by default. It does not happen inside of a Canvas because a Canvas does not take these properties into account when performing layout of its children, so they get the minimum size based on properties like Width, Height, MinWidth and similar properties of their children. Positioning in a Canvas is done with Canvas.Top and Canvas.Left properties, while a Grid uses the ~Alignment properties as well as Margins.
I have a simple wpf window which has a Scrollviewer and inside it a Web Browser.
<Window x:Class="WpfApplication9.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Background="Gainsboro">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<ScrollViewer Width="300" Grid.Column="1" Height="200" HorizontalScrollBarVisibility="Auto">
<WebBrowser Width="400" Margin="2" Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg" />
</ScrollViewer>
</Grid>
As i have given a Width to the browser which is more than the width of the Scroll Viewer
i expect the scroll viewer to show the horizontal scroll bar and show the web browser within the Scroll Viewer.
But when i horizontally scroll to the right , the web browser moves out of the scroll viwer.
Am i doing something wrong? Or is there any workaround for this?
Any help is highly appreciated. Thanks.
The WPF web browser control is actually an ActiveX component so it doesn't quite play nice with the rest of the framework. As far as I can tell, the browser gets pasted on top of your application and you will always see all of it, regardless of the underlying container.
You could try to use something like WPF Chromium instead.