responsive style menu button in WPF - c#

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>

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

XAML Custom Grid Border (Camera Viewfinder similar to dm77)

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>

WPF scrollviewer scroll without scrollbar visible like Touch but with mouse

i have the problem that i want to make a header Menu like a Menu in a Tablet or Mobilephone. It will look like this but we only see 7 Button and the 8 Button is outside of the viewing area in the Stackpanel.
When i click in the Stackpanel i am able to horizontally scroll by the left and right Keys, but i want that when my mousebutton is pressed, that ich can also scroll through it :D
i don't find enything like this, so i hope that you can help me :D
thanks
enter image description here
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="110"/>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Rectangle Name="rectangel1" Grid.RowSpan="3">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0036A0" Offset="0.003"/>
<GradientStop Color="#FFE9EDFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="750"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ScrollViewer Name="scrollviewer1" Grid.Column="1" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.ColumnSpan="1">
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn1" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 1" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn2" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 2" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn3" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 3" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn4" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 4" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn5" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 5" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn6" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 6" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn7" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 7" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,50,10">
<Rectangle Name="btn8" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 8" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
</StackPanel>
</ScrollViewer>
<Rectangle Name="rectlinks" Grid.Column="0" Fill="#FFFF7676" MouseEnter="rectlinks_MouseEnter" />
<Rectangle Name="rectrechts" Grid.Column="2" MouseEnter="rectrechts_MouseEnter" Fill="#FFFF7474" />
</Grid>

Question has already been posted on stack,
You can find it here, with a solution,
in WPF. How to scroll Objects in ScrollViewer by mouse-dragging, like as iPhone?
Just a preliminary solution, If you switch the MousebuttonDown and Up events to the Right mouse button, then u can drag scroll with right button and press with left. I'll keep looking how to do with just left

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>

Grid auto width

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>

Categories

Resources