How do I maximize a WPF window without the contents getting all messed up?
I want to design it to start maximized and the contents to fit as I designed the form?
I read about setting the hight and width settings with a *, but I'm not too sure on how to apply it, as I have tried and it doesn't seem to work.
The code in the answer below works, but how do i use that for my own app??? What is it that makes the buttons and labels etc auto-resizing?
This functionality in your application you can achieve by using Grid (msdn)
Here is simple example:
<Window x:Class="AppMaximize.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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Content="Row1Col1" />
<Button Content="Row1Col1" Grid.Row="3" Grid.Column="1" />
<Label Background="Red" Grid.Row="1" />
<Label Background="Green" Grid.Row="1" Grid.Column="1" />
<Label Background="Yellow" Grid.Row="2" />
<Label Background="Blue" Grid.Row="2" Grid.Column="1" />
</Grid>
</Window>
Related
I have a ListBox in my code that resizes it's window to the height of it's contents on creation and doesn't shows it's scroll bar, I want the window to start at it's specified size 301*287. If I resize the window smaller then the content of the ListBox exceeds it's height and the scroll bar appears, which is what I want but I don't want to have to resize the window every time it's created to achieve that. I have tried the answers in this question but none of them seemed to work.
In short the ListBox should be sized to the grid definitions on a 301*287 window at creation but doesn't, instead sizing itself to the height of it's content and making the window's height bigger than it should be.
<Window x:Class="Test.Dialogs.DatatypesDialog"
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"
xmlns:local="clr-namespace:Test.Dialogs"
mc:Ignorable="d"
Title="DatatypesDialog" Width="301" Height="287" Background="Black" SizeToContent="WidthAndHeight" MinWidth="301" MinHeight="287" WindowStartupLocation="CenterOwner">
<Grid Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<ListBox Grid.Column="0" x:Name="lbDTypes" Margin="10,10,5,10" SelectionMode="Single" SelectionChanged="lbDTypes_SelectionChanged"/>
<Grid Grid.Column="1" Margin="0,8,5,8" >
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" x:Name="tbDType" Margin="5,2,5,2" TextWrapping="Wrap" Text="" />
<Button Grid.Row="1" Margin="5,2,5,2" Content="New" Click="NewDType" />
<Button Grid.Row="2" Margin="5,2,5,2" Content="Modify" Click="EditDType"/>
<Button Grid.Row="3" Margin="5,2,5,2" Content="Remove" Click="RemoveDType"/>
<Separator Grid.Row="4" Margin="5,2,5,2" />
<Button Grid.Row="5" Margin="5,2,5,2" Content="Move Up" Click="MoveUpDType" />
<Button Grid.Row="6" Margin="5,2,5,2" Content="Move Down" Click="MoveDownDType" />
<Separator Grid.Row="7" Margin="5,2,5,2" />
<Button Grid.Row="8" Margin="5,2,5,2" Content="Save" Click="Save"/>
<Button Grid.Row="9" Margin="5,2,5,2" Content="Close" Click="Close"/>
</Grid>
</Grid>
</Window>
The property SizeToContent="WidthAndHeight" is responsible for this behavior. Remove the property or set it to another value ("Manual" or "Width") and the window should no longer adapt to the listbox.
I'm trying to develop an ancient form of chess, Chaturaji, as an assignment for school. I've got some very basic xaml setup that should allow me to drag and drop an image element within a grid.
<Page
x:Class="Projectg.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Projectg"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid AllowDrop="True" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition Width="900">
</ColumnDefinition>
<ColumnDefinition>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="900"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Background="Transparent" x:Name="grdGrid" AllowDrop="True" Grid.Column="1" Grid.Row="1" Drop="grdGrid_Drop" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image CanDrag="True" x:Name="Image" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="0" Source="/images/boat.png" DragStarting="Boat_DragStarting" Drop="Boat_Drop" DragOver="Image_DragOver" ></Image>
<Image CanDrag="True" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="0" Source="/images/horse.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="0" Source="/images/elephant.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="0" Source="/images/crown.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="1" Source="/images/pawn.png" ></Image>
</Grid>
</Grid>
</Page>
When I try to drag the image over the grid the mouse shows the “Drop Not Allowed” cursor and releasing the image does not fire the Drop event. I asked a teacher about this and she said it was probably because I did not set a background for my grid.
I quickly updated the code, but no luck, the event still did not fire. She didn't really know what was going on and told me to email her if the problem persisted.
I thought I would ask here first.
Thanks in advance for any help.
A quick glance at the MSDN UWP Drag and Drop page suggests that you need to handle the DragOver event, and indicate what drop operations the control will accept (true in any form of XAML and IIRC winforms etc. as well). In UWP, that's the AccepttedOperation property on the event args object (WPF calls that property Effects and it's a different enum type):
private void Grid_DragOver(object sender, DragEventArgs e)
{
e.AcceptedOperation = DataPackageOperation.Copy;
}
I have a typical MVVM structure. A mainwindow consists of some labels and a viewmodel (bound as ContentControl). This viewmodel has a listbox where I add entries. As the list grows the height of my viewmodel grows as well and thus the height of the whole application. Unfortunately the size doesn't stop at the edge of the screen and just grows out of the screen. I tried all the different size-restrictions on the mainwindow, the viewmodel is stretched in both dimensions.
Furthermore, I tried to get a scrollbar for the listbox but didn't succeed (or it's just there but not enabled if I force it.)
How can I restrict the maximal size to be the resolution of the screen (fullscreen) and get a scrollbar for the listbox when the size is reached?
€: Okay, here should be the relevant part of my code. I tried a fixed size of 1024x768 but even that doesn't work.
MainWindow.xaml
<Window x:Class="SWS.MainWindow"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Width="1024"
Height="768"
MaxWidth="1024"
MaxHeight="768">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding CurrentViewModel}" />
</Grid>
</Window>
The ViewModel in question
<UserControl x:Class="SWS.Views.ProgramView"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label Width="65" Content="{x:Static p:Resources.PrV_Number}" />
<Label Width="75" Content="{x:Static p:Resources.PrV_Weight}" />
<Label Width="55" Content="{x:Static p:Resources.PrV_Action}" />
<Label Content=" " />
</DockPanel>
<ListBox Grid.Row="1"
VerticalAlignment="Stretch"
ItemsSource="{Binding ParticleCollection}"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding ID}" Width="53" />
<TextBlock Text="{Binding Weight, StringFormat=F4}" Width="65" />
<TextBlock Text="{Binding Action}" Width="52" />
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
You need to set the row height to * on your Window for ContentControl and your ListBox in UserControl to fill available space than try to get what it needs.
This worked fine:
MainWindow.xaml:
<Window x:Class="SWS.MainWindow"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Width="1024"
Height="768"
MaxWidth="1024"
MaxHeight="768">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding CurrentViewModel}" />
</Grid>
</Window>
and UserControl:
<UserControl x:Class="SWS.Views.ProgramView"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
...
</Grid>
</UserControl>
Could also do this in a couple more ways:
In your Window you can just remove the <Grid.RowDefinitions>...<Grid.RowDefinitions> completely. The default behavior is what your looking for.
When you have more than 1 row you can either choose to specify Height="*" or just remove the Height Property from the RowDefinition
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
I am making an application with WPF and I have a UserControl with a Awesomium WebControl.
The moment I add a copy of this UserControl to my main window, I get an ArgumentException from WindowsBase.dll saying that "Width and Height must be positive".
Here is that UserControl:
<UserControl x:Class="ForumPost.ForumPost"
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" MinWidth="505" MinHeight="250" xmlns:my="http://schemas.awesomium.com/winfx">
<Grid Name="postGrid" Margin="5">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Background="#3166A1">
<Grid.RowDefinitions>
<RowDefinition MinHeight="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="150" />
<ColumnDefinition MinWidth="100" />
<ColumnDefinition MinWidth="125" />
<ColumnDefinition MinWidth="125" />
</Grid.ColumnDefinitions>
<Grid Height="150">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="125" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="20"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Margin="0 0 5 0" Name="specialUserFlag"/>
<TextBlock TextAlignment="Center" FontWeight="Bold" FontSize="16" Foreground="White" Name="postUsername" Grid.Column="1"/>
</Grid>
<Image Grid.Row="1" MaxWidth="125" MaxHeight="125" Name="postAvatar" />
</Grid>
<TextBlock Grid.Column="2" TextAlignment="Center" FontWeight="Bold" FontSize="16" Foreground="White" VerticalAlignment="Center" Name="postTimestamp" TextWrapping="Wrap" />
</Grid>
<my:WebControl Grid.Row="1" Name="webBrowser"/>
</Grid>
And here is my main window, as #LukeWoodward requested:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="Saxaphone.MainWindow"
Title="MainWindow" Height="850" Width="1600"
Icon="main.ico">
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="305" />
<ColumnDefinition MinWidth="1017" />
</Grid.ColumnDefinitions>
<TreeView x:Name="ForumView" ScrollViewer.HorizontalScrollBarVisibility="Diforumbled" Style="{DynamicResource ForumViewStyle}" SelectedItemChanged="ForumView_SelectedItemChanged" />
<Grid x:Name="forumGrid" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="512" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" Grid.Column="0" Height="{Binding ActualHeight, ElementName=forumGrid}">
<StackPanel x:Name="forumThreads"></StackPanel>
</ScrollViewer>
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto" Grid.Column="1" Height="{Binding ActualHeight, ElementName=forumGrid}">
<StackPanel x:Name="forumPosts"/>
</ScrollViewer>
</Grid>
</Grid>
I've now been able to reproduce the ArgumentException you're getting. I suspect that this is a bug in Awesomium. I would recommend that you contact Awesomium Support at http://support.awesomium.com/.
I found that the following XAML is sufficient to reproduce the ArgumentException. There was no need for any user-controls nor adding controls at runtime:
<StackPanel>
<as:WebControl xmlns:as="http://schemas.awesomium.com/winfx" />
</StackPanel>
I found that it was possible to work around this issue by setting an explicit Width and Height on the WebControl. It seems that a WebControl doesn't like being inside a StackPanel unless it (the WebControl) has both Width and Height set.
We are aware of this issue and it will be fixed in the final release of version 1.7.
I have this XAML for a UserControl:
<UserControl x:Class="SW.Resources.Controls.HistoryProgressBox"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Style="{StaticResource AppBackgroundStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="223" />
<ColumnDefinition Width="223" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="TitleText" Style="{StaticResource TitleListItemStyle}" Text="41xxfd" TextWrapping="Wrap" Grid.ColumnSpan="2"/>
<TextBlock x:Name="leftValue" HorizontalAlignment="Right" Style="{StaticResource DetailListItemStyle}" Text="Category: " Grid.Row="1" Grid.Column="0"/>
<TextBlock x:Name="rightValue" Style="{StaticResource DetailListItemValueStyle}" Text="tv" Grid.Row="1" Grid.Column="1" />
<TextBlock x:Name="subLeftValue" HorizontalAlignment="Right" Style="{StaticResource DetailListItemStyle}" Text="Size: " Grid.Row="2" Grid.Column="0" />
<TextBlock x:Name="subRightValue" Style="{StaticResource DetailListItemValueStyle}" Text="400MB" Grid.Row="2" Grid.Column="1" />
<Rectangle Fill="Red" x:Name="progressColor" Grid.RowSpan="4" Grid.Column="2"/>
</Grid>
It looks exactly as I want it to in Portrait. But in landscape, the control ends early. Ideally I would have this control stretch to cover the entire screen. Is this possible to do without having to do any extra code to handle the switch to Landscape?
If you put it inside another grid on the page it should resize to fit the page.
You may want to use percentage based column widths so the columns also resize.
e.g.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="223*" />
<ColumnDefinition Width="223*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>