I'm trying to make a custom viewfinder for ZXing.Mobile. It should be similar to viewfinder for dm77 (Android library). In original it looks like the picture below:
Original ViewFinder picture
I have next XAML definition for the view:
<Grid Name="Overlay" Visibility="Visible">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="1" >
<Rectangle Stroke="Green" StrokeThickness="4" StrokeDashArray="2" />
</Grid>
</Grid>
</Grid>
How can I make the border of view looks exactly like it does on the picture?
Try these lines of code. Change the values as you want.
<Grid Width="500" Height="500">
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" X2="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Line Stroke="Yellow" StrokeThickness="5" Y2="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Line Stroke="Red" StrokeThickness="5" X2="500" VerticalAlignment="Center"/>
</Grid>
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.
So I have a multi tier header, that is basically just a header with two sub headers underneath it,
the code for the look of the header is:
<Style x:Key="PlateDetailsmultitier" TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridHeaderStyleBase2Tier}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="49" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="1" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="49"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="49"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="LightGray" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Height="1" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.ColumnSpan="3"/>
<ContentPresenter Content="Plate Details" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Height="1" Grid.Row="1" Grid.ColumnSpan="3"/>
<ContentPresenter Content="t__plate" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="σy" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="3" Grid.Column="1" />
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="4" Grid.Column="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But the problem is that when I go to try to edit these cells it just selects both columns as one cell, and i can not edit either of these columns.
I would like to be able to edit both columns seperatly.
To start off datagrid template column I just used
<DataGridTemplateColumn HeaderStyle="{StaticResource PlateDetailsmultitier}" Width="100">
Is anyone aware of a solution to this problem.
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 need to add a rectangle in second row of the grid.
I need rectangle to have width same as the width of Grid.
But the problem is, width of grid is decided at runtime. If I try to access Width or ActualWidth at the back code, I get NaN or 0.0 respectively.
ColumnSpan and Stretch are not working either.
Here is the code:
<Grid x:Name="downloadPdfGrid">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height ="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btn" Content="{Binding Button}" Visibility="Collapsed" Click="OnButtonClick" Grid.Row="0"/>
<Rectangle x:Name="underlineRect" Stretch="UniformToFill" Height="2" Fill="White" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1"/>
</Grid>
Have you tried:
<Rectangle x:Name="underlineRect" Stretch="UniformToFill" Height="2" Fill="White"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1"
Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"/>
Or if you have the Grid's name:
<Rectangle x:Name="underlineRect" Stretch="UniformToFill" Height="2" Fill="White"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1"
Width="{Binding ActualWidth, ElementName=downloadPdfGrid}"/>
Edit: I forgot. I haven't worked much with Rectangle per se, but this might work too:
<Rectangle x:Name="underlineRect" Stretch="UniformToFill" Height="2" Fill="White"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1"
HorizontalAlignment="Stretch"/>