I have a grid with multiple controls and I want to choose which of these controls (or which of the grid columns) will be in the center, and then have the other columns/controls just placed adjacent to it. How would I do that?
Update:
The following pattern:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="MainControl's height"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="MainControl's width"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
will always force MainControl to be centered, as long as other controls will be defined in the * parts. In other words if position [1,1] in the above Grid contains your MainControl, you can define different Grids with different row/column definitions for positions [0,0], [0,1], ..., [2,2] to wrap more controls with custom size in custom locations.
For example this xaml:
<Window Title="MainWindow" Height="600" Width="800" >
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="50"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="0,0"/>
<Button Grid.Row="0" Grid.Column="1" Content="0,1"/>
<Button Grid.Row="1" Grid.Column="1" Content="1,1"/>
<Button Grid.Row="2" Grid.Column="2" Content="2,2"/>
</Grid>
<Button Background="LightBlue" Grid.Row="1" Grid.Column="1" Content="1,1"/>
<Grid Grid.Row="2" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="35"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="0,0"/>
<Button Grid.Row="1" Grid.Column="0" Content="1,0"/>
<Button Grid.Row="1" Grid.Column="1" Content="1,1"/>
<Button Grid.Row="2" Grid.Column="0" Content="2,0"/>
<Button Grid.Row="2" Grid.Column="2" Content="2,2"/>
</Grid>
</Grid>
</Window>
Will locate the controls this way:
What are you trying to achieve in terms of layout? Your grid strategy will determine how the whole layout behaves, especially if you expect it to scale in regards to the window size. If you want the layout to react to the window size, then you use "Auto" and "Star sizing" strategies. If you actually don't care about resizing and you expect a fixed layout, then you can share grid sizes across columns.
Scenario 1-
If you are trying to purely achieve a middle column which contains objects of unknown size, and this column must be perfectly centered, then you need to buffer this middle column with a left and right column, as per Bahman_Aries' example.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
The result from this is that items placed in the middle column will consume as much width as they need (the desired render width), and the two left over columns will split in two the remaining space, because each have a value of 1*. In other words, if your middle column object requests 200 width, and your window has 1000 total width, the left and right columns will both have 400 (800/2).
Note that star sized columns will crop your content when you reduce the window size. This is by design. You could consider wrapping your layouts in ViewBoxes (or the whole grid) if you want your ratios to persist.
Scenario 2-If you are looking for just a grid which lays out content with no regards to scaling, (re: the middle column consumes what it needs, and then the left and right columns grow equally when they have large content) then you can use the SharedSizeScope feature.
<Grid IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="MyRatio"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MyRatio"/>
</Grid.ColumnDefinitions>
</Grid>
What this will achieve is that whenever your column 2 grows, it will also propagate its size to column 0, essentially ensuring that your column 1 is always centered.
The main difference from Scenario 1 is that Scenario 2 will have a fixed size according to its child elements, whereas Scenario 1 has a structure which behaves in accordance to its parent container.
Edit: Scenario 1 with an explicit example:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" x:Name="TheLeftComponents" Orientation="Horizontal" HorizontalAlignment="Right" >
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
</StackPanel>
<Ellipse x:Name="TheMiddleComponent" Grid.Row="1" Grid.Column="1" Height="40" Width="40" Stroke="Black" StrokeThickness="1" ></Ellipse>
<StackPanel Grid.Row="1" Grid.Column="2" x:Name="TheRightComponents" Orientation="Horizontal" HorizontalAlignment="Left" >
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
</StackPanel>
</Grid>
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 defined the following DialogWindow:
<ui:DialogWindow x:Class="CodeElementRatingWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.12.0"
Title="CodeElementRatingWindow" Height="600" Width="800">
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px">
<Grid Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>
</ui:DialogWindow>
The layout basically consists of three rows. The first row has a title label, the bottom row two buttons and in the middle, I want to have a list of UI elements that I add dynamically in the code to the Grid there. Since I don't know in advance how many items that are, I want to display them in a ScrollViewer.
I can see that ScrollViewer is drawn, but the problem is, the ScrollViewer overlaps with the title label and is also somewhat clumsy. When I remove the ScrollViewer, this is not the case. So what am I doing wrong?
Just change the Grid.Row=1 for the ScrollViewer. It will work. Refer below code.
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1">
<Grid Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</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
Is there a way to convert whole Column from Grid to the Image in Windows Phone 7.1 app. I tried to find a way to do that, but cannot find anything.
My problem is that I have to change that:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" Width="180" Source="{Binding ***0}" />
<Grid Grid.Row="1" Grid.Column="0" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Height="30" Width="30" Source="{Binding ***1}"/>
<TextBlock Grid.Column="1" Height="30" Foreground="Black" Text="{Binding ***2}" TextAlignment="Center" />
</Grid>
</Grid>
into one picture. So I must change whole Grid.Column="0" from the main Grid into the Picture which size is 180x180. After that I must save it into the *.jpg file.
You can create a bitmap from a UI element and then save it as a jpeg.
As you have multiple elements (everything in the column) you may have to capture multiple bitmaps, combine them and then save as jpeg.