I made this image that shows the controls. The top one is a ListView and the others are ListView controls as well with additional controls.
But I can't figure out how to layout them to look like that.
Currently I use 3 DockPanels for each ListView where the top one uses Top VerticalAlignment, the others use Bottom for VerticalAlignment, Left and Right (for HorizontalAlignment).
But when I look at it, the other 2 controls appear after the top ListView to its right side. I can see this when I scale the top DockPanel to half the size, then the other 2 DockPanels show up, attached to the top DockPanel's right side.
Any ideas on how to fix this?
How about this?
The grid has no fixed widths or heights and should accommodate whatever controls you add.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Aqua" Height="100"/>
<StackPanel Grid.Row="2" Grid.Column="0" Background="Orange" Height="100" Width="150" VerticalAlignment="Bottom"/>
<StackPanel Grid.Row="2" Grid.Column="2" Background="Green" Height="60" Width="200" VerticalAlignment="Bottom"/>
</Grid>
Initial window
Resized window
EDIT in response to comment
If you want a progressbar in the top panel, just use:
<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
Background="Aqua" Orientation="Vertical">
<ListView Height="50" Background="Purple"></ListView>
<ProgressBar Height="20" IsIndeterminate="True" ></ProgressBar>
</StackPanel>
Do you need them to be DockPanels, or this is a fixed layout?
If it's fixed you could do something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView Grid.Row="0" Grid.RowSpan="1" Grid.Column="0" Grid.ColumnSpan="3" Name="dockPanel1" Background="CadetBlue">
</ListView>
<ListView Grid.Row="2" Grid.RowSpan="2" Name="dockPanel2" Background="Cyan">
</ListView>
<ListView Grid.Row="3" Grid.RowSpan="1" Grid.Column="2" Name="dockPanel3" Background="DarkRed">
</ListView>
</Grid>
I made the area between your three panels re-sizable as your window resizes.
Instead of the listviews that I used, you can put pretty much anything, a user control, another grid, whatever.
The colors will show you where the listview sections are easily.
You will probably want to adjust the sizes, or change the resize behavior.
You can learn more about grids here
Seems like this is the sort of scenario Alignment, Margins, and Padding are made to handle...
Related
I am trying to create a custom control which is an icon and a label overlaid on it,
so I have an icon and on top of it(top/topright/topleft etc)I want to put my label.
I tried using 3x3 grid, so the icon is in the center and according to the value of the anchor(top, topright, topleft) the label should be overlaid on the icon
so in code I am using Grid.SetRow & Set Column according to the value that was set(top right is row=0, column =2 etc)
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<usercontrols:ImageMakerControl x:Name="xIcon" Grid.Column="1" Grid.Row="1" SetAsFontImageWithSize="20" ImageType="Save" FontWeight="Bold" />
<Label x:Name="xCounterLbl" Grid.Column="2" Grid.Row="0" Style="{StaticResource $LabelStyle}">
<Grid>
<Ellipse Fill="Red" Height="{Binding ElementName=xLabelTB,Path=ActualHeight}" Width="{Binding ElementName=xLabelTB,Path=ActualWidth}" />
<TextBox x:Name="xLabelTB" FontFamily="Open Sans" Text="99+" FontSize="6.5" Foreground="White" FontWeight="Bold" Background="Transparent" BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</Label>
</Grid>
this is how it looks like:
and I am only able to achieve my goal using Margin
what should be the right way to do it or what container should I use?
I have a grid with two elements, a scaling Viewbox and a Textblock. I want to have the Viewbox take only the space it needs, but also only the space it can get.
Images explain it much better, the desired image first:
However, when I resize my application to be wider, the Viewbox starts to overtake the Textblock below it:
Here's a dumbed down version of my XAML:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid" Margin="0" UseLayoutRounding="False">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="0" x:Name="Zulrah">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue" Width="150" Height="250" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Rectangle Grid.Column="1" Fill="Red" Width="150" Height="250" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Viewbox>
<TextBlock Grid.Row="1" x:Name="TextOutput" MinHeight="100" MinWidth="100">
Hello world!
<LineBreak />
Life's good
</TextBlock>
</Grid>
You can more or less ignore the second column (with Width="0"), it's used for when the application becomes wide-screen (or landscape). It has the same issue:
In short: I want the TextBlock to obey it's MinHeight="100", while still maximizing the space the Viewbox uses.
PS: Please note that some settings make the Viewbox scale to a larger size than actually fits on the screen, this is not desireable!
Edit: Remarkably, setting a MinHeight="100" on the second row has no effect...
Since you are using ThemeResource in your code, I think you are developing an UWP app as there is no ThemeResource in WPF. If so, please remove WPF in your title and tags as they are two different frameworks. Mixed use of UWP and WPF may cause confusion.
For UWP apps, in Grid, while setting row's height to Auto, the row will size to fit its content. After the Auto rows are calculated, the row which height is set to * will get part of the remaining height.
According to your description, you want the TextBlock to obey it's MinHeight and the Viewbox gets part of the remaining height. So you can change the RowDefinitions like following:
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
And to make the Viewbox fill the remaining area, we can set VerticalAlignment and HorizontalAlignment to Stretch. Besides this, you may also need to set Stretch property to Fill to make the content in Viewbox resize to fill the destination dimensions.
The complete XAML code may like following:
<Grid x:Name="MainGrid"
Margin="0"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
UseLayoutRounding="False">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="Zulrah"
Grid.Row="0"
AllowDrop="True"
Stretch="Fill">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0"
Width="150"
Height="250"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Blue" />
<Rectangle Grid.Column="1"
Width="150"
Height="250"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Red" />
</Grid>
</Viewbox>
<TextBlock x:Name="TextOutput"
Grid.Row="1"
MinWidth="100"
MinHeight="100">
Hello world!
<LineBreak />
Life's good
</TextBlock>
</Grid>
Hello and thanks for your help in advance. I have two panels, one with a series of the buttons and a Telerik RadTreeView boxed by a border, and on the right another border encompassing a grid and some other controls. Everything is sized properly as I resize the page etc however for some reason there are about 10 pixels being cut-off and cannot think of why. If it was a page container issue it would affect the border on the right side of the page. So I'm thinking it must have something to do with the RadTreeView or WrapPanel I'm using. (Boiled-down code is right after the image below)
<!-- Code -->
<controls:ViewBase xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WindowControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" x:Name="titleTxt" Text="My Title" Style="{StaticResource textBlockHeaderStyle}"/>
<toolkit:WrapPanel Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" MaxWidth="400" Margin="2,2,2,10">
<!-- Some Buttons Here.... -->
<telerik:RadTreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectionMode="Single" IsLineEnabled="True"
ItemsOptionListType="None" IsOptionElementsEnabled="True" IsDragDropEnabled="False"
IsRootLinesEnabled="True" Margin="0,5,0,0" IsTriStateMode="True" FontSize="11" BorderThickness="1" BorderBrush="Black"/>
</toolkit:WrapPanel>
<sdk:GridSplitter Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Style="{StaticResource gridSplitterStyle}"/>
<Border Grid.Row="1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="Transparent" BorderThickness="1" BorderBrush="Black">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Some Buttons Here.... -->
</Grid>
<telerik:RadGridView Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</Grid>
</Border>
</Grid>
Didn't have time nor the inclination to look into the underlying template/styling for either the RadTreeView or the WrapPanel. I was able to fix the issue and maintain the layout by simply putting the RadTreeView in it's own row and leaving just the buttons and other controls in the wrap panel. Suppose it is simpler this way anyway.
Definitely must be a bug or compatibility issue with these two controls that will probably go unsolved.
I have a problem with my application. I want tomake a page, that will be show user notifications in the Grid. At the left side will be profile picture, at the right side profile name, message contents and time.
I have a problem with the TextBlock which contains message content.
TextWrapping doesn't seem to work. Message contents are displayed in single line, and they are cut in half.
<ListBox Name="listaWpisow" SelectionChanged="listaWpisow_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding av_url_64, Converter={StaticResource imgConv}}" Height="64" Width="64" Name="pictureBox" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
</Grid>
<Grid Grid.Column="1" Margin="25,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding login}" TextWrapping="Wrap" FontWeight="Bold" Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding content}" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding datetime_str}" FontSize="12" TextWrapping="Wrap" Grid.Row="2" Grid.Column="0"></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How to solve this problem?
The problem is that your columns are set to width="Auto" This will let them grow as much as they want In practise this will grow as much as needed to accomodate all the content.
You should change it like so:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
This will keep the ratio equal: the second column is three times the width of the first. (you should tweak this to your specific need)
Note that this needs to be done on your outer-grid since the outer grid lets the inner grid grow as much as needed, and the innergrid grows as much as needed to accomodate the long text in the textbox
I have a Silverlight application and I try to display a generated text into a Cell of my grid. Unfortunately the TextBox does not seem to be able to have a stretching height and stretching width to his parent size. For the moment, I have simply use a ScrollViewer and Set the content but I can't select the text so I still have a problem.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*" />
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Button Content="Generate" Grid.Row="1" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Height="50" Click="GenerateSerialization" />
<ScrollViewer Name="scrollText" Grid.Column="2"></ScrollViewer>
<sdk:GridSplitter Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Name="gridSplitter1" VerticalAlignment="Stretch" />
</Grid>
Sorry... when I think I understand English I see have a lot of road to travel :o)
Check this:
<ScrollViewer Name="scrollText"
HorizontalScrollBarVisibility="Disabled"
Grid.Column="2">
<TextBox TextWrapping="Wrap"
Text="Bla, bla, bla..." />
</ScrollViewer>