How can I stretch the rectangles beneath equally, so that in the first row half-half, in the second row, 1/3 1/3 1/3 allocated ?
<RelativePanel>
<Rectangle Fill="Blue" Margin="5" x:Name="Pm25" MinHeight="100" MinWidth="100" RelativePanel.AlignLeftWithPanel="True"/>
<Rectangle Fill="Blue" Margin="5" x:Name="Pm10" MinHeight="100" MinWidth="100" RelativePanel.AlignRightWithPanel="True"/>
<Rectangle Fill="Blue" Margin="5" x:Name="O3" RelativePanel.Below="Pm25" MinHeight="100" MinWidth="100"/>
<Rectangle Fill="Blue" Margin="5" x:Name="NO2" RelativePanel.RightOf="O3" RelativePanel.Below="Pm10" MinHeight="100" MinWidth="100"/>
<Rectangle Fill="Blue" Margin="5" x:Name="SO2" RelativePanel.RightOf="NO2" RelativePanel.Below="Pm10" MinHeight="100" MinWidth="100"/>
<Rectangle Fill="Blue" Margin="5" x:Name="CO" RelativePanel.Below="O3" MinHeight="100" MinWidth="100" RelativePanel.AlignLeftWith="Pm25" RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>
But currently it looks like this :
For each row of rectangles, create a StackPanel with horizontal orientation and put the rectangles there.
Related
I'm writing a UWP app and have a page with a full-page grid inside a scrollviewer with two even-width outer columns and two even-width inner columns. The right side of the page is a mirror of the left, and everything is aligned to the similar column on the opposite side. However, when I run my app and decrease the width, after a certain point only the third column shrinks. Before that point, all the columns adjust correctly. I don't have any width or minwidth properties set. If I set a fixed width on my grid, the columns resize to be even. I've tried changing which columns my elements are aligned to on various elements, removing the ScrollViewer, and double- and triple-checking for any min-widths being set anywhere.
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Away" FontSize="48" FontWeight="Bold"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/>
<Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/>
<RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" />
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/>
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/>
</Grid>
</ScrollViewer>
This is how my page looks in the designer:
OK... it appears to me that the layout is overconstrained - likely due to a lot of Blend arranging (a lot of crazy margins in there). If you want predictable layouts, I would recommend positioning the controls within the bounds of the grid sections that you expect to see them rather than trying to use margins to position them. Basically, which grid section do you want the element (Grid.Row=# Grid.Column=#), how many sections does it span (Grid.RowSpan=# Grid.ColumnSpan=#), which edges to align to (HorizontalAlignment=Left/Right/Center/Stretch VerticalAlignment=Left/Right/Center/Stretch), and how much space do you want from the edges (Margin=# # # #)?
So,
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
Becomes,
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
Additionally, I'm not sure you need the viewboxes, richtextboxes, and paragraphs with runs for what you are doing, but I do not know the entire scope of what you're trying to accomplish.
Try something like the following:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
<Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Viewbox Grid.Column="3">
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" >
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/>
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/>
<Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/>
<TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" />
</Grid>
</ScrollViewer>
I am trying to set a caption (something like the caption of a html table control) for my grid control but I am not seeing any property related to that. Am I missing something ?
Currently I am thinking to set the grid caption using another TextBlock control having the same alignment with the grid... but this seems to get complicated for such a simple thing.
Do you know, is there another way to set the caption of a grid in a universal windows project ?
Add another row to your grid. Then add a TextBlock to the last row for the caption. Set the Grid ColumnSpan property, for the TextBlock, to span all of the columns in your grid.
Here is an example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="White" />
<Rectangle Grid.Row="0" Grid.Column="1" Fill="Black" />
<Rectangle Grid.Row="0" Grid.Column="2" Fill="White" />
<Rectangle Grid.Row="0" Grid.Column="3" Fill="Black" />
<Rectangle Grid.Row="1" Grid.Column="0" Fill="Black" />
<Rectangle Grid.Row="1" Grid.Column="1" Fill="White" />
<Rectangle Grid.Row="1" Grid.Column="2" Fill="Black" />
<Rectangle Grid.Row="1" Grid.Column="3" Fill="White" />
<Rectangle Grid.Row="2" Grid.Column="0" Fill="White" />
<Rectangle Grid.Row="2" Grid.Column="1" Fill="Black" />
<Rectangle Grid.Row="2" Grid.Column="2" Fill="White" />
<Rectangle Grid.Row="2" Grid.Column="3" Fill="Black" />
<Rectangle Grid.Row="3" Grid.Column="0" Fill="Black" />
<Rectangle Grid.Row="3" Grid.Column="1" Fill="White" />
<Rectangle Grid.Row="3" Grid.Column="2" Fill="Black" />
<Rectangle Grid.Row="3" Grid.Column="3" Fill="White" />
<TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="4"
Text="This is a Caption"
HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="Black" FontSize="10"/>
</Grid>
Currently I am thinking to set the grid caption using another TextBlock control having the same alignment with the grid... but this seems to get complicated for such a simple thing.
This is an acceptable solution, Mike Jablonski has provided a sample. If you need to ensure reusability, you can create a UserControl which using TextBlock control to show Caption, registering a dependency property is a good way to set "Caption" for this UserControl, see Dependency properties overview
I have collection of data items that should be represented on a page in a row.
<ItemsControl ItemsSource="{x:Bind ViewModel.PresetsSecondLine, Mode=OneWay}"
Visibility="{x:Bind ViewModel.IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0 5">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
HorizontalChildrenAlignment="Stretch"
MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="entities:Preset">
<controls:PresetButtonControl Preset="{x:Bind}"
VerticalAlignment="Stretch"
Width="290"
Margin="5"
Style="{StaticResource DashboardButtonStyle}"
HorizontalAlignment="Stretch" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
The collection might contain from zero to 4 items displayed in a row. If there are 4 items, they should fill whole row. When there are less than 4 items they should be displayed proportionally:
I found the solution of such issue with UniformGrid, unfortunately UniformGrid is not longer supported in UWP.
1) The first easy solution is to use ViewBox which is much like UniformGrid. You can use as below:
<Viewbox Stretch="Uniform" MaxHeight="60" MaxWidth="200">
<StackPanel Orientation="Horizontal">
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
</StackPanel>
</Viewbox>
2) Or you can choose VariableSizedWrapGrid, which is a layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns. You can find detail info on MSDN. Below is a simple example.
<VariableSizedWrapGrid Orientation="Horizontal" MaxWidth="150" >
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
</VariableSizedWrapGrid >
Actually there are still more other ways for adaptive UI. But the above two seem more straight forward and easy.
Let me know if anything unclear.
I am working on Windows Phone 8 app wherein I have a Stackpanel and I want to put 7 rectangles in it. I want those rectangles to be of equal height irrespective of screen size. I tried setting Height="*" but it is giving error.
<StackPanel>
<Rectangle Fill="Violet" Height="*"></Rectangle>
<Rectangle Fill="Indigo" Height="*"></Rectangle>
<Rectangle Fill="Blue" Height="*"></Rectangle>
<Rectangle Fill="Green" Height="*"></Rectangle>
<Rectangle Fill="Yellow" Height="*"></Rectangle>
<Rectangle Fill="Orange" Height="*"></Rectangle>
<Rectangle Fill="Red" Height="*"></Rectangle>
</StackPanel>
Can anyone help me with it?
The following should do it for you:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<RowDefinition Height="*">
<Grid.RowDefinitions>
<Rectangle Fill="Violet" Grid.Row="0" />
<Rectangle Fill="Indigo" Grid.Row="1" />
<Rectangle Fill="Blue" Grid.Row="2" />
<Rectangle Fill="Green" Grid.Row="3" />
<Rectangle Fill="Yellow" Grid.Row="4" />
<Rectangle Fill="Orange" Grid.Row="5" />
<Rectangle Fill="Red" Grid.Row="6" />
</Grid>
There is also a UniformGrid that can do this for you:
<UniformGrid Columns="1" Rows="7" />
I have 2 Grids in XAML. One small and one big. How I can detect that, after first move, it upon second? I need smth like coordinates (need to align the first grid to the second grid's border or to other grids in this 'big-grid'). What're methods, properties?
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="Parent" Margin="124,340,1042,228">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" ManipulationDelta="Object_ManipulationDelta" x:Name="Figure" ManipulationMode="All">
<Rectangle Fill="Red" Width="40" Height="40"/>
<Rectangle Fill="Red" Width="40" Height="40" Margin="-10,30,70,30"/>
<Rectangle Fill="Red" Width="40" Height="40" Margin="-10,70,70,-10"/>
<Rectangle Fill="Red" Width="40" Height="40" Margin="-50,70,110,-10"/>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
</Grid>
<Grid x:Name="Field" Width="500" Height="700">
<Rectangle Fill="Black" Width="40" Height="40" Margin="10,10,450,650" StrokeThickness="1" Stroke="#FF1B1B1B"/>
<Rectangle Fill="Black" Width="40" Height="40" Margin="50,10,410,650" StrokeThickness="1" Stroke="#FF1B1B1B"/>
<Rectangle Fill="Black" Width="40" Height="40" Margin="90,10,370,650" StrokeThickness="1" Stroke="#FF1B1B1B"/>
<!--many rectangles-->
</Grid>
</Grid>
I move Grid Figure to Grid Field. In future I may be change rectangle to border.
To detect the relative position between Figure and Field, you can use something like that:
var transform= Field.TransformToVisual(Figure);
Point relativePosition = transform.TransformPoint(new Point(0,0));
relativeCoordinate will be the distance between the Top Left of Field and the Top left of Figure
if you want the absolute coordinate of the Grid you can do this:
var transform= this.TransformToVisual(Figure);
Point absolutePositionFigureGrid = transform.TransformPoint(new Point(0,0));