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.
Related
Apologies if I'm going mad, but as shown in the following image, each RowDefinition inside my grid appears to be adding '0.5'px vertical margin to itself.
It's a completely blank project, created from scratch.
Have I remembered this incorrectly or is something up?
<Grid UseLayoutRounding="True" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Width="40" Height="10" Background="Aqua" Margin="1"/>
<Border Grid.Row="1" Width="40" Height="10" Background="Red" Margin="1"/>
</Grid>
Note, it's not just Visual Studio's Designer window that's showing this, binaries are exhibiting the same.
So if you remove both of the properties as mentioned in the comments that are giving permission to adjust based on the measure/arrange pass in this scenario you should be back down to your desired margin.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Width="40" Height="10" Background="Aqua" Margin="1"/>
<Border Grid.Row="1" Width="40" Height="10" Background="Red" Margin="1"/>
</Grid>
Hope this helps.
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 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>
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 create a binary tree in wpf that will look like that:
So, I created three classes - Node (Abstract), And OneTypeNode, And TwoTypeNode (those are example, btw, MVVM is important here).
Every node also have reference to his two sons.
in the xaml, it look something like that:
<StackPanel>
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="0" x:Name="CircleFather" CornerRadius="5"
Width="40"
Height="40"
Background="DarkKhaki"
Margin="0 20 0 0"
BorderThickness="1" >
</Border>
<ContentControl Grid.Row="2" Grid.Column="0" Content="{Binding RightSon}" Margin="10"></ContentControl>
<ContentControl Grid.Row="2" Grid.Column="2" Content="{Binding LeftSon}" Margin="10"></ContentControl>
</Grid>
<Line ></Line>
</StackPanel>
Which actually let me create sons recursively!
But there are two main problems: first of all is the size, I can't control the size of the grid since I don't know how many sons are gonna be on every side. ALSO - I don't have any idea to how create the lines between every two nodes. Any idea?
Thank you very very much!