XAML Custom Grid Border (Camera Viewfinder similar to dm77) - c#

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>

Related

WPF White screen and 1 GB of umanaged RAM usage on Windows 8.1 and Windows 7

I have a problem with WPF Application. It runs perfectly on Windows 10, tested on latest update 1803 and latest Insider Fast, but when application is run on Windows 8 or 7, application starts, uses 1 GB of unamanged RAM for few milliseconds and then renders only white screen. App is running and I can see cursor changing and code running in background, but when I try to move Window for example, application crashes with Out Of Memory exception and Application does not have enough memory to execute.
I do not understand this problem, I tried removing code from it... It can be libraries or XAML.
I tried different .NET versions. I am out of ideas.
Did anyone ever had this problem? How to solve it? I can publish code if required to get help... I am really lost.
<Window x:Name="mainWindow" x:Class="GameV2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:local="clr-namespace:GameV2"
xmlns:GameEngine="clr-namespace:GameEngine;assembly=GameEngineV2"
xmlns:zp="clr-namespace:ZoomAndPan;assembly=ZoomAndPan"
mc:Ignorable="d" TextElement.Foreground="{DynamicResource MaterialDesignBody}" Background="Black"
Title="MainWindow" Height="640" Width="1280" PreviewKeyDown="mainWindow_PreviewKeyDown">
<Grid Margin="0,0,0,0">
<materialDesign:DialogHost IsTabStop="False">
<Grid>
<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" Grid.Row="1">
<zp:ZoomAndPanControl UseAnimations="True" MinimumZoomType="FitScreen" ZoomAndPanInitialPosition="FitScreen" x:Name="zoomBorder">
<Grid x:Name="maingrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" UseLayoutRounding="True" SnapsToDevicePixels="True" Width="Auto" Height="Auto">
</Grid>
</zp:ZoomAndPanControl>
</ScrollViewer>
<!--GUI-->
<Grid Panel.ZIndex="3">
<!--TOP PANEL-->
<Grid x:Name="menuControlGrid" Margin="0,0,0,0" Width="Auto" Height="50" VerticalAlignment="Top" Panel.ZIndex="9999" Background="#99000000" RenderOptions.BitmapScalingMode="HighQuality">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="485"/>
<ColumnDefinition Width="1*" MinWidth="250"/>
<ColumnDefinition Width="195"/>
</Grid.ColumnDefinitions>
<Button x:Name="menuButton" HorizontalAlignment="Right" Margin="0,10,5,10" Width="30" Height="Auto" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Grid.Column="2" Click="menuButton_Click"/>
<Image HorizontalAlignment="Right" Margin="0,10,5,10" Width="30" Height="Auto" Grid.Column="2" Source="Resources/Icons/menu.png" IsHitTestVisible="False"/>
<ToggleButton x:Name="buildButton" Content="BUILD" HorizontalAlignment="Center" Margin="-30,10,0,10" Width="105" Height="Auto" Style="{DynamicResource MaterialDesignRaisedLightButton}" Grid.Column="2" Checked="buildButton_Checked" Unchecked="buildButton_Unchecked"/>
<Grid HorizontalAlignment="Left" Margin="5,7,0,3" Width="105" Grid.Column="0">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/Status/happy.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="65 535" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="50" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"></TextBox>
</Grid>
</materialDesign:Card>
</Grid>
<Grid HorizontalAlignment="Left" Margin="115,7,0,3" Width="155" Grid.Column="0">
<materialDesign:Card>
<Grid>
<Image Source="Resources/Icons/balance.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="2 147 483 647" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="100" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold" />
</Grid>
</materialDesign:Card>
</Grid>
<Grid HorizontalAlignment="Left" Margin="275,7,0,3" Width="115" Grid.Column="0">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/profit.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="999 999" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="60" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"/>
</Grid>
</materialDesign:Card>
</Grid>
<Grid HorizontalAlignment="Left" Margin="395,7,0,3" Width="85" Grid.Column="0">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/quests.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="255" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="30" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"/>
</Grid>
</materialDesign:Card>
</Grid>
<Grid Margin="25.2,7,25.4,3" Grid.Column="1">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/calendar.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" x:Name="clockText" Cursor="Arrow" Text="{Binding Path=ClockMessageText, ElementName=mainWindow}" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="120" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"/>
<Border BorderBrush="{DynamicResource MaterialDesignBody}" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="170,5,5,5">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="14*"/>
<ColumnDefinition Width="12*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="0" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="1" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="2" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="3" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="4" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="5" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="6" />
</Grid>
</Border>
</Grid>
</materialDesign:Card>
</Grid>
</Grid>
<Path Width="10" Height="10" Margin="500.35,49.75,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="#99000000" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False" RenderOptions.EdgeMode="Aliased">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Data>
<PathGeometry PresentationOptions:Freeze="True" Figures="M 10,0 5,0 Q 0,0 0,5 L 0,10 L 0,0 L 10,0" />
</Path.Data>
</Path>
<Path Width="10" Height="10" Margin="656,50,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="#99000000" IsHitTestVisible="False" RenderOptions.EdgeMode="Aliased">
<Path.Data>
<PathGeometry PresentationOptions:Freeze="True" Figures="M 10,0 5,0 Q 0,0 0,5 L 0,10 L 0,0 L 10,0" />
</Path.Data>
</Path>
<Border BorderBrush="{DynamicResource MaterialDesignBody}" BorderThickness="0,0,0,0" CornerRadius="0,0,9,9" Margin="510,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Height="33" Width="146" Background="#99000000" Panel.ZIndex="10000" RenderOptions.BitmapScalingMode="HighQuality" RenderOptions.EdgeMode="Aliased">
<Grid x:Name="menuTimeGrid">
<Grid Margin="10,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left">
<Button x:Name="pause" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Width="26" Height="26" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled" Click="pause_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/pause.png"/>
</Grid>
<Grid Margin="43,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="play" Style="{DynamicResource MaterialDesignFloatingActionButton}" Width="26" Height="26" Click="play_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/Play.png"/>
</Grid>
<Grid Margin="76,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="playFast" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Width="26" Height="26" Click="playFast_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/fast.png"/>
</Grid>
<Grid Margin="109,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="playFastest" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Width="26" Height="26" Click="playFastest_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/fastest.png"/>
</Grid>
</Grid>
</Border>
<!--RIGHT PANEL-->
<Grid x:Name="buildGrid" VerticalAlignment="Stretch" HorizontalAlignment="Right" Margin="0,50,0,0" Width="220" Visibility="Hidden">
<Grid.RowDefinitions>
<RowDefinition Height="100px"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border x:Name="buttonsBorder" Grid.Row="0" Background="#99000000" BorderBrush="{DynamicResource MaterialDesignBody}" BorderThickness="0,0,0,0" CornerRadius="0,0,0,9">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Width="100" Height="1" RenderTransformOrigin="0.5,0.5" Margin="130.5,49,-10,49" TextWrapping="NoWrap" IsHitTestVisible="False" IsEnabled="False" Cursor="Arrow" HorizontalAlignment="Left" Grid.RowSpan="2">
<TextBox.RenderTransform>
<TransformGroup>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</TextBox.RenderTransform>
</TextBox>
<Grid Grid.Row="0">
<Grid HorizontalAlignment="Left" Margin="5,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="roadButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="RoadButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/road.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="40,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="structureButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="StructureButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/foundaments.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="75,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="wallButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="WallButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/walls.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="110,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="objectButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="ObjectButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/objects.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="145,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="floorButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="FloorButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/floors.png" ></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="185,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="zoneButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="ZoneButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/Planning.png"></Image>
</Grid>
</Grid>
<Grid Grid.Row="1">
<Grid HorizontalAlignment="Left" Margin="5,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disRoadButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisRoadButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/noroad.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="40,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disStructureButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisStructureButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/nofoundaments.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="75,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disWallButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisWallButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/nowalls.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="110,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disObjectButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisObjectButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/noobjects.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="145,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disFloorButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisFloorButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/nofloors.png" ></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="185,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="assignJobButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="AssignJobButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/Assigment.png"></Image>
</Grid>
</Grid>
</Grid>
</Border>
<Border x:Name="contentBorder" Grid.Row="1" Background="#99000000" Visibility="Hidden">
<ContentControl x:Name="buildMenuContent"/>
</Border>
</Grid>
<Path Height="10" Margin="0,50,220,0" VerticalAlignment="Top" Fill="#99000000" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False" HorizontalAlignment="Right" Width="10" Visibility="{Binding ElementName=buildGrid, Path=Visibility}" RenderOptions.EdgeMode="Aliased">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Data>
<PathGeometry PresentationOptions:Freeze="True" Figures="M 10,0 5,0 Q 0,0 0,5 L 0,10 L 0,0 L 10,0" />
</Path.Data>
</Path>
</Grid>
<Grid Panel.ZIndex="2" Background="{Binding Path=DayNightBrush, ElementName=mainWindow}" Opacity="{Binding Path=DayNightOpacity, ElementName=mainWindow}" IsHitTestVisible="False"/>
</Grid>
</materialDesign:DialogHost>
</Grid>
</Window>
And background code https://pastebin.com/gbBqLeWH

You must have set these two properties to your Window:
window.AllowsTransparency = true;
window.WindowStyle = WindowStyle.None;
This two properties will change your window into a layered window and will take much more memory than a normal one.
If you have done so, remove it. If you want a custom title bar, try to use a WindowChrome.
Read more about window style customize using WindowChrome:
WindowChrome Class (System.Windows.Shell) - Microsoft Docs
WPF 使用 WindowChrome，在自定义窗口标题栏的同时最大程度保留原生窗口样式（类似 UWP/Chrome） - walterlv

Coordinates in WPF Canvas

when defining coordinates for canvas shapes in XAML files, is it possible to do something like this:
<Canvas x:Name="myCanvas"
DockPanel.Dock="Bottom"
VerticalAlignment="Stretch">
<Canvas.Background>
<SolidColorBrush Color="White" Opacity="100" />
</Canvas.Background>
<Ellipse x:Name="ell1"
Width="30"
Height="30"
Stroke="Black"
StrokeThickness="1"
Fill="Red"
Canvas.Left="100"
Canvas.Top="50" />
<Ellipse x:Name="ell2"
Width="30"
Height="30"
Stroke="Black"
StrokeThickness="1"
Fill="Red"
Canvas.Right="100"
Canvas.Top="50" />
<Line Stroke="Black"
StrokeThickness="1"
X1="ell1.Canvas.Right" *** look here ***
Y1="ell1.Canvas.Top + ell1.Height/2" *** look here ***
X2="ell2.Canvas.Left" *** look here ***
Y2="ell2.Canvas.Top + ell2.Height/2" /> *** look here ***
</Canvas>
Or the only way of doing it is through C#?
Thanks,
Massimo

You can indeed bind to an attached property like this:
<Line ... X2="{Binding Path=(Canvas.Left), ElementName=ell1}" />
But there is no + or / operators defined in XAML so you will have to write some code to be able to set the Y1 property to 50 + 30 / 2.
After all XAML is a markup language and C# is a programming language.

This should generate the desired result without too much hassle. You may have to adjust the Margin of the Grid.
<Grid DockPanel.Dock="Bottom" Margin="100,50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Ellipse Grid.Column="2" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Rectangle Grid.Column="1" Fill="Black" Height="1"/>
</Grid>
This is even simpler:
<DockPanel DockPanel.Dock="Bottom" Margin="100,50">
<Ellipse DockPanel.Dock="Left" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Ellipse DockPanel.Dock="Right" Grid.Column="2" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Rectangle Fill="Black" Height="1"/>
</DockPanel>

Screen resolution not display correctly grid

I created a simple application on my laptop with 1440x900 resolution and size of text,app 100% (setting the menu screen in the settings). when I run the application on my tablet with 1920x1080 resolution and 125%, the grid is not displayed correctly.
right:
wrong:
if my tablet I change the size of font,app in 100% or 175%, the grid is displayed correctly.
thank you
Edit:
This is the code xaml:
<Grid x:Name="Grid">
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="#F2F2F2" BorderThickness="0,0.1,0,0.1">
<Line Stroke="#E9E9E9" X1="0" X2="400" Y1="30" Y2="30" StrokeThickness="1" StrokeDashArray="6" StrokeDashCap="Flat" />
</Border>
<Border Grid.Row="1" BorderBrush="#F2F2F2" BorderThickness="0,0.1,0,0.1">
<Line Stroke="#E9E9E9" X1="0" X2="400" Y1="30" Y2="30" StrokeThickness="1" StrokeDashArray="6" StrokeDashCap="Flat" />
</Border>
<Border Grid.Row="2" BorderBrush="#F2F2F2" BorderThickness="0,0.1,0,0.1">
<Line Stroke="#E9E9E9" X1="0" X2="400" Y1="30" Y2="30" StrokeThickness="1" StrokeDashArray="6" StrokeDashCap="Flat" />
</Border>
<Border Grid.Row="3" BorderBrush="#F2F2F2" BorderThickness="0,0.1,0,0.1">
<Line Stroke="#E9E9E9" X1="0" X2="400" Y1="30" Y2="30" StrokeThickness="1" StrokeDashArray="6" StrokeDashCap="Flat" />
</Border>
<Border Grid.Row="4" BorderBrush="#F2F2F2" BorderThickness="0,0.1,0,0.1">
<Line Stroke="#E9E9E9" X1="0" X2="400" Y1="30" Y2="30" StrokeThickness="1" StrokeDashArray="6" StrokeDashCap="Flat" />
</Border>
<Border Grid.Row="5" BorderBrush="#F2F2F2" BorderThickness="0,0.1,0,0.1">
<Line Stroke="#E9E9E9" X1="0" X2="400" Y1="30" Y2="30" StrokeThickness="1" StrokeDashArray="6" StrokeDashCap="Flat" />
</Border>

I solved it by changing the thickness greater than 0.4:
<Border Grid.Row="0" BorderBrush="#F2F2F2" BorderThickness="0,0.4,0,0.4"> </Border>

responsive style menu button in WPF

I hope someone can help, I am fairly new to WPF and want to create a button that looks like the menu button in mobile Apps and on responsive web applications, that is a square button with three horizontal lines.
I have tried creating a button with a canvas and three lines but this does not work correctly.
Can anyone suggest the XAML that could achieve this please?
EDIT
I have added the code in to my application from the answer, the XAML is below
<Button x:Name="systemButton" IsTabStop="False" Style="{StaticResource LightWindowButtonStyle}" HorizontalAlignment="Left" VerticalAlignment="Top">
<Button.Content>
<Grid Width="31" Height="23" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Path Data="M8,8 L28,8" Fill="{TemplateBinding Foreground}" Height="4" StrokeThickness="4" Stretch="Fill" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Center" />
<Path Data="M8,8 L28,8" Fill="{TemplateBinding Foreground}" Height="4" StrokeThickness="4" Stretch="Fill" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Center" Grid.Row="1" />
<Path Data="M8,8 L28,8" Fill="{TemplateBinding Foreground}" Height="4" StrokeThickness="4" Stretch="Fill" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Center" Grid.Row="2" />
</Grid>
</Button.Content>
</Button>
In my AeroWindow class I am getting the instance of the button and binding to the click event as below
var systemButton = this.GetTemplateChild("systemButton") as Button;
if (systemButton != null)
{
systemButton.Click += this.SystemButtonOnClick;
}
But the event handler never gets fired when I click the button. I have checked and systemButton is not null therefore the Click event gets bound to the event handler, the breakpoint on the event handler never gets hit through. Anyone have any ideas?

You need to put your content in the Button, and for that you apply a content template.
<Window.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid Width="51" Height="42">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="1"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="2"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="3"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="4"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<Button Content="" HorizontalAlignment="Left" Margin="112,88,0,0" VerticalAlignment="Top" Width="56" Height="48"
ContentTemplate="{DynamicResource DataTemplate1}"/>
<Button HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0,88,232,0" VerticalAlignment="Top" Width="67" Height="56">
<Button.Content>
<Grid Width="51" Height="42">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" StrokeThickness="5"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="1" StrokeThickness="5"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="2" StrokeThickness="5"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="3" StrokeThickness="5"/>
<Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="4" StrokeThickness="5"/>
</Grid>
</Button.Content>
</Button>
I have updated my answer. In DataTemplate we are using Height, and in next Button we are using only StrokeThickness.
And for using style you can do following changes :
<Window.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid Width="51" Height="42">
<Grid.Resources>
<SolidColorBrush x:Key="PathFillBrush" Color="#FF2DBE29"/>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center"/>
<Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="1"/>
<Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="2"/>
<Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="3"/>
<Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="4"/>
</Grid>
</DataTemplate>
<Style TargetType="Button">
<Setter Property="ContentTemplate" Value="{DynamicResource DataTemplate1}"/>
</Style>
</Window.Resources>

Why the Visual brush that is based on the Grid shows horizontal and vertical grid lines

If you test the code below and any bright image you will see 4 columns and 4 rows painted over the used image. I need this configuration to use for some kind of effect.
Basically I made it and it works but these grid lines I would like to remove and do not know how. Is it maybe related to the implementation of the Grid control itself ?
Grid's property ShowGridlines is false.
There is a possibility to use the Canvas instead of the grid and do the placement manually but I would like to stay with the Grid and use the Canvas as the last solution.
<Image Source="/Image1.tif" Visibility="Visible" >
<Image.OpacityMask>
<VisualBrush x:Name="DissolveInBrush" TileMode="None" >
<VisualBrush.Visual>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="0" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="0" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="0" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Image.OpacityMask>
</Image>

You may set the RenderOptions.EdgeMode property to Aliased on the Grid to avoid this effect:
<VisualBrush x:Name="DissolveInBrush" TileMode="None" >
<VisualBrush.Visual>
<Grid RenderOptions.EdgeMode="Aliased">
...
</Grid>
</VisualBrush.Visual>
</VisualBrush>

Categories

Resources