How can I set a layout to have 100% width and 100% height?
I want my Silverlight application to stretch in the browser to fill all space.
I am using Expression Blend 4.
Here is my XAML:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="RichardKnopNew.MainPage"
Width="960" Height="540">
<Grid x:Name="LayoutRoot" Width="960" Height="540">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/bg.jpg"/>
</Grid.Background>
<Rectangle Fill="#FF252525" Stroke="Black" Opacity="0.7" RadiusX="10" RadiusY="10" Margin="25,115,335,25" StrokeThickness="0" Height="400"/>
</Grid>
</UserControl>
Your application should do this automatically. The only reasons why it would not do so are:
You've constrained the size of the Silverlight object in the HTML page that hosts the application, or
You've explicitly set the width/height of the MainPage object in MainPage.xaml.
Setting the Background property of the MainPage object to a non-white colour should demonstrate this. If not, please include more details (including the XAML you are using).
Hope this helps...
Chris
Related
I am very new at this WPF world, i have some experience in the classic Windows Desktop applications.
I am trying to create a custom UserControl polygon shaped.
I have tryied creating a Path Data and then setting the UserControl Opacity property to "0", but it makes transparent the whole UserControl.
For example, i have build this Polygon inside the user control
<UserControl x:Class="WindowsFormsApp2.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480" Opacity="100">
<Grid x:Name="LayoutRoot">
<Path Data="M-70.616296,46.859802 L7.3270039,-1.2587545 174.31959,52.958763 168.71134,98.185567 z" Fill="#FF2121D6" HorizontalAlignment="Left" Height="100" Margin="138,114,0,0" Stretch="Fill" Stroke="Black" Opacity ="100" VerticalAlignment="Top" Width="246"/>
</Grid>
As you can see the user control is 640x480 so when i add code to the UserControl_MouseLeftButtonDown event, it fires if clicking in ay position inside the 640x480 while i want only to fire when clicking inside the polygon.
I have been googling for a solution but i can't found any solution, ¿maybe what i want it's not possible?
You may template a UserControl to look like a polygon:
<UserControl x:Class="WpfApp1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<Path Data="M-70.616296,46.859802 L7.3270039,-1.2587545 174.31959,52.958763 168.71134,98.185567 z"
Fill="#FF2121D6" HorizontalAlignment="Left" Height="100" Margin="138,114,0,0"
Stretch="Fill" Stroke="Black" Opacity ="100" VerticalAlignment="Top" Width="246"/>
</ControlTemplate>
</UserControl.Template>
</UserControl>
Or you may just get rid of the UserControl and use the Path element directly. It also has a MouseLeftButtonDown event that you can handle.
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.
Is there a way to have controls/images/etc "out of" the Window/Chrome (ie, Aero's glass) in WPF?
An example of what I mean is the WPF Yahoo Messenger which was released (and then discontinued) awhile back. The WindowStyle looks like it is set to None, but AllowTransparencies/CanResize set to false/true respectively - and the avatar is slightly "out of the window/chrome".
I know I could create my own glass border, but that may be a fair bit of effort to get it looking consistent.
Yes, I believe you will have to replace window's interface with your own. You can start with transparent window and a grid within leaving some margin around the grid. Then put thumbs, titlebar etc on the grid to simulate window behavior. Margin around the grid will allow you to draw controls outside your "window".
<Window
x:Class="TransparentFormDemo.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300"
AllowsTransparency="True"
WindowStyle="None" Background="Transparent">
<Grid Margin="20" Background="AliceBlue">
<Thumb Name="topThumb" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"
DragDelta="topThumb_DragDelta" Cursor="SizeNS"/>
<!--Thumbs continued-->
<Polygon Points="10,110 60,10 110,110" Fill="Blue" Margin="0,-30"/>
</Grid>
</Window>
I have a WPF form that I am building. I want to specify a background image for the window, which is easy enough. However, I also want to specify a color so that the area of the form not covered by the image is white. I've seen some examples that show using two different background brushes, but when I try that VS.NET tells me I can't have multiple brushes.
This is the XAML I'm using
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
Title="Shell" WindowStyle="None" WindowState="Maximized" FontSize="24">
<Window.Background>
<ImageBrush AlignmentX="Left" AlignmentY="Top" Stretch="None" TileMode="None" ImageSource="logo_header2.png" />
</Window.Background>
<ItemsControl Background="White" VerticalAlignment="Center" cal:RegionManager.RegionName="MainRegion" >
</ItemsControl>
</Window>
This works great for the image, but the background not covered by the image is black. How do I make it white? Changing the image itself is not really an option.
Try this (I removed everything not directly relevant to the question to make the code clearer):
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="logo_header2.png" />
</Grid.Background>
<ItemsControl>
</ItemsControl>
</Grid>
</Window>
Basically, set the window's background to the behind the image color, than put a grid in the window and give the grid you background image, put everything inside the grid instead of directly in the window.
As an Extension to Nirs answer. If you want to have margins around your content, but let the background image be able to fill the whole window, you can also stack backgrounds using borders:
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White">
<Border Padding="10">
<Border.Background>
<ImageBrush ImageSource="logo_header2.png" />
</Border.Background>
<!--<Your content >-->
</Border>
</Window>
I'm not sure you can combine brushes. You could play around with ImageBrush, or you could forget the "background" and stack the items on top of each other in a Grid:
<Window x:Class="Consent.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
Title="Shell" WindowStyle="None" WindowState="Maximized" FontSize="24">
<Grid>
<Image Source="logo_header2.png" Stretch="None" VerticalAlignment="Top" />
<ItemsControl Background="White" VerticalAlignment="Center" cal:RegionManager.RegionName="MainRegion" >
</ItemsControl>
</Grid>
</Window>