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.
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 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>
I'm trying to put a <Border/> around a <Grid/> in a page, however the border appears to be bordering the page rather than the grid.
This is only XAML in my page element.
<Border Background="Black">
<Grid Background="{ThemeResource ControlBackgroundBrush}" x:Name="LoginCredentials" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Username:" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right" Margin="5"/>
<TextBox x:Name="UserName" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" Grid.Row="0" Grid.Column="1" TextChanged="UserChange" Margin="5"/>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click" Grid.Row="2" HorizontalAlignment="Right" Margin="5" TabIndex="0"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
As a test I created a resource to fill the background of the <Grid/> with a colour and also filled the background of the <Border/> with a different colour. The <Grid/> ends up as a box in the center of the screen as intended, but the border <Border/> fills the entire screen. Can anyone tell me why this happens and how to get the <Border/> to fit around the <Grid/> as I want?
Got it!
<Border Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
....
</Border>
As soon as i posted the question, what i was missing became clear!
The question is simple as 1x1 and I suppose the answer is also that simple.
I would like to fit my grid's width and height to it's content. So if I change the content's size from code I would like the grid to have the same size.
I've tried the following:
<Grid x:Name="ContainerGrid" Background="Cyan" MouseDown="ContainerGrid_Tapped_1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="1">
<Rectangle x:Name="small" Fill="Red" Width="100" Height="100" Visibility="Visible"/>
<Rectangle x:Name="big" Fill="Green" Width="500" Height="500" Visibility="Collapsed"/>
</StackPanel>
<Grid x:Name="SelectedCheckMark" Grid.Column="1" Grid.Row="0" Visibility="{Binding ElementName=big,Path=Visibility}">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"
Fill="BlueViolet" Stretch="Fill"/>
<Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z"
Fill="White" FlowDirection="LeftToRight"
HorizontalAlignment="Right" Height="15" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
</Grid>
</Grid>
Code behind relevant part:
private void ContainerGrid_Tapped_1(object sender, MouseButtonEventArgs e)
{
//Set opoosite visibility
small.Visibility = (small.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
big.Visibility = (big.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
}
I would like that no Cyan color could be seen in any state of the grid. However now the width of the ContainerGrid does not fit to it's content.
What I've missed?
Try to work with HorizontalAlignment and VerticalAlignment Properties of ContainerGrid.
For example
<Grid x:Name="ContainerGrid" Background="Cyan" MouseDown="ContainerGrid_Tapped_1" Margin="0,0,0,0" ShowGridLines="True" Height="Auto" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">
Their default value is Stretch, which means the grid will stretch within the entire space given by its parent element irrespective of the content.
Try changing your XAML to the following:
<Grid x:Name="ContainerGrid" Background="Cyan" MouseDown="ContainerGrid_Tapped_1" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="1">
<Rectangle x:Name="small" Fill="Red" Width="100" Height="100" Visibility="Visible"/>
<Grid>
<Rectangle x:Name="big" Fill="Green" Width="500" Height="500" Visibility="Collapsed"/>
<Grid x:Name="SelectedCheckMark" Grid.Column="1" Grid.Row="0" Visibility="{Binding ElementName=big,Path=Visibility}" HorizontalAlignment="Right" VerticalAlignment="Top">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"
Fill="BlueViolet" Stretch="Fill"/>
<Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z"
Fill="White" FlowDirection="LeftToRight"
HorizontalAlignment="Right" Height="15" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
</Grid>
</Grid>
</StackPanel>
</Grid>
I use this code to define two quarter circles:
<Grid Width="300" Height="300" Margin="50" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Path Name="Test1" Stroke="Black" StrokeThickness="5" s:Contacts.ContactDown="Test1_PreviewContactDown" s:Contacts.PreviewContactDown="Test1_PreviewContactDown" Data="M25,0 A25,25 90 0 1 50,25 l-25,0 Z" Fill="Orange" Grid.Row="0" Grid.Column="1" Stretch="Fill"/>
<Path Name="Test2" s:Contacts.ContactDown="Test2_PreviewContactDown" s:Contacts.PreviewContactDown="Test2_PreviewContactDown" Data="M50,25 A25,25 90 0 1 25,50 l0,-25 Z" Fill="Red" Grid.Row="1" Grid.Column="1" Stretch="Fill" />
<Ellipse Fill="Transparent" Stroke="Black" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
<Ellipse Fill="White" Stroke="Black" StrokeThickness="5" Width="100" Height="100" Grid.ColumnSpan="2" Grid.RowSpan="2"></Ellipse>
</Grid>
Now I'd like to extend this code, so that instead of two quarter circles with cover half a circle, I'd like to have 6 circle segments which each 30 degrees. How can I do that? I wasn't really able to understand the Path Markup Syntax.
I agree with VoodooChild above that your best bet is to use a visual designer like Expression Blend. You can get a free trial from Microsoft. You can just make the path you want and copy the generated XAML into whatever page you are authoring.
Also, doing a little googling, I found this:
http://marlongrech.wordpress.com/2008/01/10/jasema-the-xamlpadx-plugin-for-building-path-geometry/
Which looks like a free Path builder plugin for XAMLPadX. I haven't tried it myself, but suffice to say that there is no magical easy way to make Paths in WPF without using a tool.