I have to fill my window with three adjustable Rectangles like:
<Grid x:Name="FileDragAndDrop" Grid.Row="0" Grid.RowSpan="2" Background="Aqua">
<Rectangle Fill="Beige" HorizontalAlignment="Stretch" Height="110" Stroke="Black" VerticalAlignment="Top" />
<Rectangle Fill="Aquamarine" HorizontalAlignment="Stretch" Height="110" Stroke="Black" VerticalAlignment="Center" />
<Rectangle Fill="BlanchedAlmond" HorizontalAlignment="Stretch" Height="110" Stroke="Black" VerticalAlignment="Bottom" />
</Grid>
But the above code does this:
I tried Height="2*" (following the answer) but it gives error
'2*' string cannot be converted to length
How can I resolve this error and make their height dynamic? Is it possible with the xaml or will I have to do it in C#?
In case you cannot put the rectangles into rows of the main grid, you can use a nested Grid and Grid.RowSpan to cover the nested Grid over the whole main grid.
<Grid x:Name="FileDragAndDrop" Grid.Row="0" Grid.RowSpan="2" Background="Aqua">
<Grid.RowDefinitions>
<!-- suppose you have 3 RowDefinitions here -->
</Grid.RowDefinitions>
<Grid Grid.RowSpan="3">
<Grid.RowDefinitions>
<RowDefinition MinHeight="110"/>
<RowDefinition MinHeight="110"/>
<RowDefinition MinHeight="110"/>
</Grid.RowDefinitions/>
<Rectangle Fill="Beige" Stroke="Black"/>
<Rectangle Fill="Aquamarine" Stroke="Black" Grid.Row="1"/>
<Rectangle Fill="BlanchedAlmond" Stroke="Black" Grid.Row="2"/>
</Grid>
</Grid>
Related
Here is the code that I'm working with and an image which shows the result. This final product has the look that I'm going for, but I think that there must be a better way to do this.
<Page
x:Class="UIFollowAlong.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIFollowAlong"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="Rectangle"
x:Key="ColorButton">
<Setter Property="Margin" Value="5"/>
<Setter Property="RadiusX" Value="50"/>
<Setter Property="RadiusY" Value="50"/>
</Style>
</Page.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
The code in particular that I'm asking the question about is the Ellipse.
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
How can I align the ellipse to the center while ignoring the row and column definitions of the grid? By default, the ellipse goes to 0,0 and gets placed on top of the red rectangle in the top-most left-most grid position.
I tried to place within the page, rather than within the grid, but I think the page can only have one content property?
The picture I showed is exactly the result I wanted I'm just wondering if there is an alternative way to achieve this that does involve spanning multiple row and column definitions.
Thanks!
To have have multiple layers over the same area introduce one more Grid:
<Grid>
<!--layer 0-->
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
</Grid>
<!--layer 1, covers layer 0-->
<Ellipse x:Name="CenterDot"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
Grid with White background and Ellipse are positioned in the same cell of the outer Grid.
To see how Ellipse can cover Rectangles - increase Ellipse size (Height/Width)
I am trying to create a scrolling list of panels with each one having a different appearance. I have used the variable sized wrap grid but my images don't seem to show correctly on the smaller panels. The items in the grid view are bound to a list of unknown length.
Screenshot of the current layout
Here is the xaml code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:MyGridView ItemsSource="{Binding}" IsItemClickEnabled="True" ItemClick="Button_Click" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="190" ItemWidth="320" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate >
<DataTemplate x:DataType="data:Article">
<Grid Height="1080" Width="1440" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="{x:Bind image}" Stretch="UniformToFill" />
<StackPanel VerticalAlignment="Top">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity=".75" />
</StackPanel.Background>
<TextBlock FontSize="30" Margin="5" TextWrapping="WrapWholeWords" >
<Run Text="{x:Bind Name}"/>
</TextBlock>
<TextBlock Margin="5" FontSize="15" FontWeight="Thin" TextWrapping="Wrap" TextTrimming="WordEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="19" MaxHeight="38" >
"It is hard to miss the warnings. In the race to make computers more intelligent than us, humanity will summon a demon, bring forth the end of days, and code itself into oblivion. Instead of silicon assistants we'll build silicon assassins. The doomsday story of an evil AI has been told a thousand times. But our fate at the hand of clever cloggs robots may in fact be worse - to summon a class of eternally useless human beings."
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</local:MyGridView>
</Grid>
Ideally I want the layout shown in the xaml code below but I have two further problems:
1) I don't know how to turn this into a template so that I can bind to the list
2) The images in the inner-most grid do not layout according to the *-size proportions that I had set.
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36*"/>
<ColumnDefinition Width="648*"/>
<ColumnDefinition Width="36*"/>
</Grid.ColumnDefinitions>
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<Grid Name="grid1">
<Image Source="/Assets/obama.jpg" VerticalAlignment="Center" Stretch="UniformToFill" Margin="0 5 0 5"/>
<Rectangle Fill="Black" Opacity=".3" />
<TextBlock VerticalAlignment="Center" Text="Obama Is President" TextWrapping="WrapWholeWords" FontSize="133.333" Foreground="White" HorizontalAlignment="Center"/>
</Grid>
<Grid Name="grid2" Margin="20 0 20 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Tag="blah" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}"/>
<Button Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}"/>
<Button Grid.Row="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}" />
<Button Tag="g" Grid.Row="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}" />
</Grid>
<Grid Grid.Column="1" >
<Grid.RowDefinitions>
<RowDefinition Height= "*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="test" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
<Button Content="test" Grid.Row="4" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
I know my code is likely quite messy since i am new to xaml and windows development in general but I'd appreciate any solutions.
Update: It's been pointed out that I specified grid dimensions which is causing my problem with the images, removing the grid height and width results in them showing properly. To follow up, is there now a way for the images to now change size depending on the window size (stretch/squish) up to a limit before the wrap effect takes place?
I am trying to connect centre of ellipses with lines. THis is what I have-
Here is the XAML code-
<Grid x:Name="Main" Background="#FFF9F9F9">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="8*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid x:Name="Start" Grid.Row="0" Background="#FF0D3A7C">
</Grid>
<Grid x:Name="End" Grid.Row="2" Background="#FF0D3A7C">
</Grid>
<Grid x:Name="Game" Grid.Row="1" Background="#FF0D3A7C">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Ellipse Fill="#FFF4F4F5" Grid.Row="0" Grid.Column="0" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="0" Grid.Column="1" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="0" Grid.Column="2" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="1" Grid.Column="0" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="1" Grid.Column="1" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="1" Grid.Column="2" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="2" Grid.Column="0" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="2" Grid.Column="1" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
<Ellipse Fill="#FFF4F4F5" Grid.Row="2" Grid.Column="2" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
</Grid>
</Grid>
Now I want to connect a line or checkbox from centre of each ellipse to all the ellipses using C#. Basically I will have a button and upon clicking it, I want all the lines to appear. I am new to app development and am not sure how to go about it.
Edit-
Basically I want to connect the centres of each nodes to all the rest. THis is similar to the following figure where I have done it for the first node manually-
Assuming that the number of ellipsis stays the same and that you know which one is which where. Also, this is a quick & dirty explanation.
Start by giving each ellipsis a name
<Ellipse Name="ETopLeft" Fill="#FFF4F4F5" Grid.Row="0" Grid.Column="0"
Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
In the Code Behind get the current X/Y position of all ellipsis at runtime with this and add half the lenght/height to get all centers
Point posETopLeft = ETopLeft.TransformToAncestor(MainWindow)
.Transform(new Point(0, 0));
posETopLeft.X += (ETopLeft.Width / 2)
posETopLeft.Y += (ETopLeft.Height / 2)
Now add lines dynamically to the form, rinse and repeat according to your logic/requirements.
var myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.Black;
myLine.X1 = CenterPointETopLeft.X;
myLine.X2 = CenterPointETopMiddle.X;
myLine.Y1 = CenterPointETopLeft.Y;
myLine.Y2 = CenterPointETopMiddle.Y;
Canvas.Children.Add(myLine);
This is not everything, and you'll end up with many repetition, but I think it'll be a good exercise for you to figure out how to make it really work and more elegant.
I'd like to solve the following with pure XAML if possible, but if it is not possible please let me know. I don't have a C# solution either, so if that must be utilized please send me down the appropriate path:
In the following, there is a 2-column grid. In the left column is a scrollviewer with dynamic content. In the right column is a stackpanel with dynamic content. I want the content of the right column to control the height of the parent grid and the left column - in other words, I want the right column to be the master. In the right column there might be three items or there might be 10. If there are only three, the height of the entire grid should be short and the content in the left scrollviewer should scroll. There may be 100 items in the left scrollviewer, so I can't have that item controlling the height.
Here is the sample code:
<Grid x:Name="grd_Parent" Background="#FFF4E9FF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="Left" Grid.Column="0">
<!-- This side should scale (and scroll) to the height of the right column-->
<StackPanel VerticalAlignment="Top">
<Rectangle Height="50" Fill="Red"/>
<Rectangle Height="50" Fill="Blue"/>
<Rectangle Height="50" Fill="Black"/>
<Rectangle Height="50" Fill="Brown"/>
<Rectangle Height="50" Fill="Purple"/>
<Rectangle Height="50" Fill="DarkGreen"/>
<Rectangle Height="50" Fill="Violet"/>
<Rectangle Height="50" Fill="Wheat"/>
<Rectangle Height="50" Fill="DarkCyan"/>
<Rectangle Height="50" Fill="DarkGray"/>
<Rectangle Height="50" Fill="DarkOrange"/>
</StackPanel>
</ScrollViewer>
<StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
<!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
<TextBlock Height="50" Text="This"/>
<TextBlock Height="50" Text="Side"/>
<TextBlock Height="50" Text="Should"/>
<TextBlock Height="50" Text="Determine"/>
<TextBlock Height="50" Text="The"/>
<TextBlock Height="50" Text="Height"/>
<TextBlock Height="50" Text="Of"/>
<TextBlock Height="50" Text="Parent"/>
</StackPanel>
</Grid>
Here is a screenshot of the sample as it exists:
Here is a screenshot of what I'm hoping it can look like:
Thanks in advance,
Beems
Try this and let me know if it works. The below changes cause the ScrollViewer to bind to the ActualHeight of the StackPanel. This way, it should never be larger than the StackPanel.
<Grid x:Name="grd_Parent" Background="#FFF4E9FF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="Left" Height="{Binding ElementName=Right, Path=ActualHeight}" Grid.Column="0">
<!-- This side should scale (and scroll) to the height of the right column-->
<StackPanel VerticalAlignment="Top">
<Rectangle Height="50" Fill="Red"/>
<Rectangle Height="50" Fill="Blue"/>
<Rectangle Height="50" Fill="Black"/>
<Rectangle Height="50" Fill="Brown"/>
<Rectangle Height="50" Fill="Purple"/>
<Rectangle Height="50" Fill="DarkGreen"/>
<Rectangle Height="50" Fill="Violet"/>
<Rectangle Height="50" Fill="Wheat"/>
<Rectangle Height="50" Fill="DarkCyan"/>
<Rectangle Height="50" Fill="DarkGray"/>
<Rectangle Height="50" Fill="DarkOrange"/>
</StackPanel>
</ScrollViewer>
<StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
<!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
<TextBlock Height="50" Text="This"/>
<TextBlock Height="50" Text="Side"/>
<TextBlock Height="50" Text="Should"/>
<TextBlock Height="50" Text="Determine"/>
<TextBlock Height="50" Text="The"/>
<TextBlock Height="50" Text="Height"/>
<TextBlock Height="50" Text="Of"/>
<TextBlock Height="50" Text="Parent"/>
</StackPanel>
</Grid>
I have a expander which contains a grid in which I have a grid splitter.
The Document Outline and UI is like this
and here is the code.
<Grid x:Name="TopGrid" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Expander x:Name="CompanyDescriptionExpander" Grid.ColumnSpan="2"
VerticalAlignment="Top" IsExpanded="True" Background="Black" >
<Expander.Header>
<Grid Width="{Binding ElementName=CompanyDescriptionExpander,
Path=ActualWidth}" Background="Aquamarine">
<TextBlock Grid.Column="0" Text="Expander Header" Foreground="Black" />
</Grid>
</Expander.Header>
<Expander.Content>
<Grid x:Name="DescriptionGrid" MaxHeight="130" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="Auto" MinHeight="25" MaxHeight="120"/>
<RowDefinition Height="4" MinHeight="10" MaxHeight="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="Orange" Grid.Row="0" Grid.RowSpan="2"
MinHeight="40" MaxHeight="120" x:Name="DescriptionText"
Text="TextBlock Content" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto" />
<Button x:Name="SaveIconButton" Grid.Column="1" Grid.Row="0" Width="20"
Height="20" VerticalAlignment="Top" />
<Button x:Name="CancelIconButton" Grid.Column="1" Grid.Row="1" Width="20"
Height="20" VerticalAlignment="Top" />
<GridSplitter ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"
Grid.Row="2" Grid.ColumnSpan="2"
Height="10" MaxHeight="10" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Background="Red" />
</Grid>
</Expander.Content>
</Expander>
<Button Grid.Row="1" Grid.Column="0" Margin="0,5,0,0" Height="20"
VerticalAlignment="Top" Background="Green" />
</Grid>
When we use grid splitter it expands
But it goes on even after textbox reaches its maximum height and gridsplitter goes behind button(green).
My problem scenario can be replicated copying my code in a project
I want that it should stop when textbox reaches its maximum height.
How to do that?
In your DescriptionGrid change the second rows MaxHeight from 120 to 95.
The combined max height of the three rows in that grid exceeds the max height of the grid itself.