xaml layout introduction for Qt programmer - wpf

I am used to Qt and its Qt Designer.
XAML with its layout controls 'grid' and 'StackPanel' are somehow similar, but I still miss or do not find some of the most common properties of designs in Qt. Since I am completely new to XAML I would like to know the answers or further available documentations.
For example I want to add 2 elements (lets say buttons) either horizontal or vertical with their default height and a minimum height and minimum width. If aligned horizontal they shall be pushed to the left side and the remaining side on the right should be free. That means that the size of the buttons does not increase if the windows size is increased. In Qt this is realized by a grid in combination with a spacer (see for example this tutorial for an example).
My first XAML is far away from what I expect. The definition of RowDefinition is copied from a tutorial. However I do not understand its meaning...
<Window x:Class="SpectrumViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Spectrum Viewer" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Margin="8" VerticalAlignment="Top">
<Button MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="100" Name="buttonTest">test</Button>
<TextBox MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="150" Name="textBoxValue"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="8" >
<Button MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="100" Name="button1">button 1</Button>
<Button MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="100" Name="button2">button 2</Button>
</StackPanel>
</Grid>
</Window>
The next image shows that the elements are pushed to the left side, but the two stacked panels above each other are not pushed to the top. If I set them both with VerticalAlignment="Top" they overlap which is also wrong.
If I resize the window one can see that the elements are not resized and that the second StackPanel overlaps with the first:
Instead the elements should be resized to the minimum width and any further resizing of the windows should be prohibited.

The first problem of the two stack panels overlapping when you set both VerticalAlignment to Top is because since you haven't specified in which Grid.Row they should be, the default would be both in Grid.Row = 0. Specify the row index and they won't overlap :
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="8" VerticalAlignment="Top">
....
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="8" VerticalAlignment="Top">
....
</StackPanel>
There is no way the window would stop resizing when the minimum size of the buttons is reached. You could set the MinWidth of the Grid and ask the window to stop right there :
<Window x:Class="SpectrumViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Spectrum Viewer" Height="350" Width="525"
MinWidth="{Binding RelativeSource={RelativeSource Self}, Path=Content.MinWidth}">
<Grid MinWidth="350">
.......
</Grid>
</Window>
Or set the MinWidth of the Window itself :)

Related

How can I automatically resize objects that are in a grid?

So I have recently started learning more C# and I am currently trying to create a GUI. I so far have a title and a text box that looks like this:
https://i.imgur.com/BvpkQ3U.png
Yes, this looks fine, it's not the problem. The problem is when you open the window (by debugging it) the window is set to the size of which it looks like on the preview. Which is fine. But, when I maximize it the objects inside of the window do not get larger. They stay at the same size. Which looks like this:
BEFORE:
https://i.imgur.com/NuGTDwf.png
AFTER:
https://i.imgur.com/pVy2aYk.png
How can I make it so the objects inside of the window get larger just like the window itself does?
MainWindow.xaml:
<Window x:Name="THE_GUI" x:Class="MainWindow"
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:GUI"
mc:Ignorable="d"
Title="GUI" Height="450" Width="800" Foreground="Black" WindowStyle="SingleBorderWindow">
<Grid>
<TextBlock x:Name="GUI_TITLE2" HorizontalAlignment="Center" Margin="0,10,0,0" Text="TITLE" TextWrapping="Wrap" VerticalAlignment="Top" Height="50" Width="125" FontSize="18"/>
<TextBox HorizontalAlignment="Left" Margin="41,35,0,0" Text="TextBox" TextWrapping="Wrap" VerticalAlignment="Top" Width="204" Height="375" IsReadOnly="True"/>
</Grid>
</Window>
If you require more code I can provide it
Thanks! :)
PS
I did see this question: WPF: How can I have controls in a grid automatically resize when the grid is resized? but it doesn't help me at all.
Do not set Height & Width of controls (TextBlock/TextBox) if you want them to resize. Also you are using a plain grid with no Row/Columns so WPF will not know how to scale your GUI.
You need to read about different type of Panels/Containers available in WPF and how to use them to Lay your Controls.
Check: StackPanel, WrapPanel, DockPanel. For Grid read about RowDefinitions and Columndefinitions. Read the WildCard height and width assignment.
As suggested by Prateek also, simply putting controls under grid won't work. If you want to go with grid control, then please have row and columns created to align the controls. I've updated your code and here it is:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="13*"/>
<RowDefinition Height="87*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="30*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1"
x:Name="GUI_TITLE2" HorizontalAlignment="Stretch"
Text="TITLE" TextWrapping="Wrap" VerticalAlignment="Stretch"
FontSize="18"/>
<TextBox Grid.Row="1" Grid.Column="0"
HorizontalAlignment="Stretch" Text="TextBox" TextWrapping="Wrap"
VerticalAlignment="Stretch" IsReadOnly="True"/>
</Grid>

Strange white box covering controls

In the Designer everything looks alright but in Debbuging a weird white rectangle covers a part of it (If I don't set any Margin in the Button, It looks fine).
Designer
While Debugging
<Window x:Class="MyProgram.MainWindow" ResizeMode="NoResize"
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:MyProgram"
mc:Ignorable="d"
Title="MyProgram" Height="450" Width="650">
<Grid>
<Label Content="Things:" HorizontalAlignment="Left" Margin="0,7,0,0" VerticalAlignment="Top" FontSize="22"/>
<Button Height="28" Width="180" Background="Transparent" BorderThickness="0" Margin="454,15,10,378" >
<StackPanel Orientation="Horizontal">
<Image Source="Resources/addpackage2.png" Width="35" />
<TextBlock Text="Add" Margin="3,0,3,0" FontSize="18" />
</StackPanel>
</Button>
</Grid>
I'm doing something wrong?
The margin on your button Margin="454,15,10,378" is constricting the space available for the button. If you make the make the window larger, you will see the whole button.
Edit
There are different ways to organize a layout in XAML, but usually a grid is a good choice.
This is one way you could write it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Things:" HorizontalAlignment="Left" Margin="7" VerticalAlignment="Top" FontSize="22"/>
<Button Grid.Row="0" Grid.Column="1" Height="28" Width="180" Background="Transparent" BorderThickness="0" >
<StackPanel Orientation="Horizontal">
<Image Source="Resources/addpackage2.png" Width="35" />
<TextBlock Text="Add" Margin="3,0,3,0" FontSize="18" />
</StackPanel>
</Button>
</Grid>
I have added row and column definitions to the grid. In this case two rows and two columns.
The top row is sized automatically according to its content. The second row fills the remaining space.
Similarly, the right hand column is sized automatically according to its content and the left hand column fills the remaining space.
This is just an example. You might want to define a different layout. I presume that the bottom of the screen will not always be white space.
Having defined the rows and columns, you can assign the individual controls to the cells in the grid, by specifying the Grid.Row and Grid.Column properties.
I have placed your label in row 0, column 0 and I have placed the button in row 0 column 1.
Very important, is that I have removed the Margin definition from the button. This kind of positioning controls is, in my opinion, always an error.
I think that the layout is more or less as you wanted.

Why this example from Pro Silverlight 4 book doesnt work?

I am reading a Pro Silverlight 4 book (http://my.safaribooksonline.com/book/programming/csharp/9781430229797/xaml/element-to-element_binding), and I do all examples from the book. But an example from the binding chapter doesnt work for me. The slider doesnt move after I compile and run the application:
<UserControl
x:Class="SilverlightApplication14.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"
Background="White">
<Slider
x:Name="sliderFontSize"
Margin="3"
Minimum="1"
Maximum="40"
Value="10"></Slider>
<TextBlock
Margin="10"
Text="Simple Text"
x:Name="lblSampleText"
FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
</Grid>
Dave S, is absolutely correct. You can see the Z-Index problem reversing the order of the controls (so the TextBlock is before the Slider)- it will then work because the slider will be on top of the TextBlock:
<Grid
x:Name="LayoutRoot"
Background="White">
<TextBlock
Margin="10"
Text="Simple Text"
x:Name="lblSampleText"
FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
<Slider
x:Name="sliderFontSize"
Margin="3"
Minimum="1"
Maximum="40"
Value="10"></Slider>
</Grid>
You can see here that Z-Index is determined by the order of controls in the XAML.
An alternate way round this (or to demonstrate) is to specify the Z-Index attached property explicitly:
<Grid
x:Name="LayoutRoot"
Background="White">
<Slider
x:Name="sliderFontSize"
Margin="3"
Minimum="1"
Maximum="40"
Value="10" Canvas.ZIndex="1"></Slider>
<TextBlock
Margin="10"
Text="Simple Text"
x:Name="lblSampleText"
FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
</Grid>
The best way to fix this is to simply make sure that the elements don't overlap each other, by putting them in different rows:
<Grid
x:Name="LayoutRoot"
Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Slider Grid.Row="1"
x:Name="sliderFontSize"
Margin="3"
Minimum="1"
Maximum="40"
Value="10"></Slider>
<TextBlock
Margin="10"
Text="Simple Text"
x:Name="lblSampleText"
FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
</Grid>
In this sample, the TextBlock is in row 0 and the slider is in row 1, so they no longer overlap.
Both the Slider and the TextBlock are in the Grid in the same position (0,0). This means the TextBlock is being shown drawn directly on top of the Slider so any mouse events will always be captured by the TextBlock and not the Slider. This is implicitly implied as the TextBlock has the higher Z-Index by being defined second in the Grid. If you re-arrange the Grid and apply either Grid.Row="1" or Grid.Column="1" to the TextBlock so it is beside the Slider control you should be able to use the Slider successfully.

How to stretch the controls as per the page size in wpf

I have a listview of width set to Auto. When I run the windows app, it opens in normal size(not maximized). But when I maximize the window, the listview's width will be same and the space to its right is empty.
normal size
|_________________________|
Maximized
|_________________________|...........
even though the window is now in full screen occupied.
Please guide me in workin on this.
Thanks
Ramm
StackPanel, by design, does not care about visual space. It aims to take up the smallest amount of space possible. You can leave the innermost StackPanel that wraps the radio buttons in place, but your outer layout containers should be changed to Grid or, as in my example below, DockPanel:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="445" Width="515">
<DockPanel Name="spDataFlow" Margin="0,45,0,0" >
<DockPanel x:Name="stkPnlDataFlow" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
<StackPanel Grid.Row="1" Background="Red" Margin="20,15,0,0" Orientation="Horizontal" VerticalAlignment="Center" >
<RadioButton Name="rdbtnUploadData" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" Foreground="White" Content="Upload Data" IsEnabled="True" CommandParameter="UploadAll"/>
<RadioButton Name="rdbtnDownloadData" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" Foreground="White" Content="Download Data" Margin="20,0" CommandParameter="DownloadAll"/>
<RadioButton Name="rdbtnUploadSelected" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" Foreground="White" Content="Update Data" Margin="10,0" CommandParameter="UpdateSelected"/>
</StackPanel>
</DockPanel>
</DockPanel>
</Window>
Well, I believe that by default the ListView control automatically fills all available space so it is very strange that have such an issue. Could you paste your code?

Using WrapPanel and ScrollViewer to give a multi-column Listbox in WPF

I’m making a simple LOB app which loads data from an XML file and displays it in a list with a few buttons for editing.
In my first attempt, everything was ok except that the list scrolled downwards in one long column. I would prefer the data to wrap so that at the bottom of the Window it starts a second column, and so on – if you resize the Window the data should resize accordingly.
First, I just put the ListBox inside a ScrollViewer. This made no difference whatsoever.
Then, I added a WrapPanel within the ItemTemplate. At this point I got a long row horizontally but it never wrapped to a second row, despite my setting the ScrollViewer.HorizontalScrollbar=disabled.
I’ve searched around the web on various blogs and forums, but can’t see the difference between the suggestions and my code (included below). Any tips would be much appreciated.
<Window x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="My App" Height="300" Width="400"
FocusManager.FocusedElement="{Binding ElementName=eventsList}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ListBox Name="eventsList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</ScrollViewer>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Center" Visibility="Collapsed">
<Button Name="action1Button" />
<Button Name="action2Button" />
<Button Name="action3Button" />
</StackPanel>
</Grid>
</Window>
It seems like you were on the right track: replacing the ItemsPanelTemplate in the ListBox with a WrapPanel, setting WrapPanel's Orientation to Vertical, and setting ScrollViewer.VerticalScrollBar to Disabled should be all you need to do.
This works for me:
<Window x:Class="ScrollingWrapPanel.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<Rectangle Width="80" Height="80" Margin="10" Fill="Red"/>
</ListBoxItem>
<ListBoxItem>
<Rectangle Width="80" Height="80" Margin="10" Fill="Orange"/>
</ListBoxItem>
<ListBoxItem>
<Rectangle Width="80" Height="80" Margin="10" Fill="Yellow"/>
</ListBoxItem>
<ListBoxItem>
<Rectangle Width="80" Height="80" Margin="10" Fill="Green"/>
</ListBoxItem>
<ListBoxItem>
<Rectangle Width="80" Height="80" Margin="10" Fill="Blue"/>
</ListBoxItem>
<ListBoxItem>
<Rectangle Width="80" Height="80" Margin="10" Fill="Indigo"/>
</ListBoxItem>
<ListBoxItem>
<Rectangle Width="80" Height="80" Margin="10" Fill="Violet"/>
</ListBoxItem>
</ListBox>
</Grid>
</Window>
That should cause it to render out a full column vertically, wrap, and then continue on the next column, scrolling as necessary horizontally (but not vertically), as in the picture:
The key things in this implementation are
Setting Orientation="Vertical" on the WrapPanel so that things wrap vertically and not horizontally, and
Setting ScrollViewer.VerticalScrollBarVisibility="Disabled" on the ListBox so that the ScrollViewer knows to restrict its height to the available space.
I believe to do this, you need to write custom code - you've got the right idea in overriding ItemsPanelTemplate, but WrapPanel doesn't order stuff the way you want it - it'll order stuff as:
A B C D
E F G H
I J K L
Whereas you probably want it:
A D G J
B E H K
C F I L
Also, by putting it in a ScrollViewer, it's like telling it that it has an infinitely sized screen, so the result will just be one row (because the ScrollViewer will give it as much room as it asks for). Writing a panel isn't hard, it's basically just two functions (Measure and Arrange).

Resources