WPF button content (vector drawing) not visible - wpf

I have in resource dictionary Buttons.xml two vector drawings for to be shown as a button content.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox
x:Key="BlueMinusButton"
Height="20"
Stretch="Uniform">
<Canvas
Width="100"
Height="100">
<Canvas.LayoutTransform>
<ScaleTransform
ScaleX="1"
ScaleY="-1"
CenterX=".5"
CenterY=".5" />
</Canvas.LayoutTransform>
<Ellipse
Canvas.Left="0"
Canvas.Top="0"
Height="100"
Width="100"
Fill="Blue" />
<Line
X1="10"
X2="90"
Y1="50"
Y2="50"
Fill="Black"
StrokeThickness="10"
Stroke="Black" />
</Canvas>
</Viewbox>
<Viewbox
x:Key="GreenPlusButton"
Height="20"
Stretch="Uniform">
<Canvas
Width="100"
Height="100">
<Canvas.LayoutTransform>
<ScaleTransform
ScaleX="1"
ScaleY="-1"
CenterX=".5"
CenterY=".5" />
</Canvas.LayoutTransform>
<Ellipse
Canvas.Left="0"
Canvas.Top="0"
Height="100"
Width="100"
Fill="Green" />
<Line
X1="10"
X2="90"
Y1="50"
Y2="50"
Fill="Black"
StrokeThickness="10"
Stroke="Black" />
<Line
X1="50"
X2="50"
Y1="10"
Y2="90"
Fill="Black"
StrokeThickness="10"
Stroke="Black" />
</Canvas>
</Viewbox>
</ResourceDictionary>
In view1.xaml I have three buttons and other controls and I use from resources same content for two buttons.
<UserControl
x:Class="ApplicationName.View1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ApplicationName">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="Buttons.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Content="Object1" />
<Button
Grid.Column="1"
Grid.Row="0"
Content="{StaticResource BlueMinusButton}"
Command="{Binding DoCommand1}" />
<Label
Grid.Column="0"
Grid.Row="1"
Content="Object2" />
<Button
Grid.Column="1"
Grid.Row="1"
Content="{StaticResource GreenPlusButton}"
Command="{Binding DoCommand2}" />
<Label
Grid.Column="0"
Grid.Row="2"
Content="Object3" />
<Button
Grid.Column="1"
Grid.Row="2"
Content="{StaticResource GreenPlusButton}"
Command="{Binding DoCommand3}" />
</Grid>
</UserControl>
view1.xaml is used in view2.xaml.
<UserControl
x:Class="ApplicationName.View2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="ApplicationName">
<Grid>
<StackPanel>
<Label
Content="Controls" />
<local:View1
DataContext="{Binding View1Context}"/>
<Label
Content="Other controls" />
</StackPanel>
</Grid>
</UserControl>
Here comes the problem: When looking the view2.xaml in xaml editor, the content for the middle button is missing. Same happens in run time. If I look view1.xaml in xaml editor, all the button contents are visible. Here is a picture from the views:
Why the content is not shown and how do I get it back?

Set x:Shared="False" for your each ViewBoxif you want to useit in multiple places.

Related

WPF main left height 100%, main right height 100% and footer

I have created the following design with main left, main right and footer.
However I want main left to be height 100%, so that the dark gray background color goes all the way down to the footer.
I've tried to set height=*, but it doesnt help.
My design:
NewProjectWindow.xaml
<Window x:Class="QuickImageForensicsWPF.NewProject.NewProjectWindow"
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:local="clr-namespace:QuickImageForensicsWPF.NewProject"
mc:Ignorable="d"
Title="New Project | Quick Image Forensics" Height="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}" Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}" Top="0" Left="0">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\res\style\Btn.xaml" />
<ResourceDictionary Source="..\res\style\Input.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid Background="#FF45474A">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Main -->
<StackPanel x:Name="stackPanelMain" Grid.Row="0" Grid.Column="0" >
<Grid Background="#FF45474A">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="stackPanelLeft" Grid.Row="0" Grid.Column="0" Background="#FF393939" Margin="0,0,20,0">
<!-- Left content -->
<Label x:Name="labelProjects" Content="New project" Margin="0,20,0,0" FontSize="16" Foreground="#FFBABAA8" FontWeight="Bold"/>
<Label x:Name="labelNewProjectStep01" Content="Project information" Margin="0,0,0,0" FontSize="14" Foreground="#FFBABAA8" FontStyle="Italic" />
<Label x:Name="labelNewProjectStep02" Content="Automated tasks" Margin="0,0,0,0" FontSize="14" Foreground="#FFBABAA8" />
<Label x:Name="labelNewProjectStep03" Content="Search" Margin="0,0,0,0" FontSize="14" Foreground="#FFBABAA8" />
<!-- //Left content -->
</StackPanel>
<StackPanel x:Name="stackPanelRight" Grid.Row="0" Grid.Column="1">
<!-- Right content -->
<DockPanel x:Name="dockPanelMain" LastChildFill="False">
<local:NewProjectStep01ProjectInformationUserControl x:Name="newProjectStep01ProjectInformationUserControl" Panel.ZIndex="0" />
<local:NewProjectStep02AutomatedTasksUserControl x:Name="NewProjectStep02AutomatedTasksUserControl" Panel.ZIndex="1" />
<local:NewProjectStep03SearchUserControl x:Name="NewProjectStep03SearchUserControl" Panel.ZIndex="2" />
</DockPanel>
<!-- //Right content -->
</StackPanel>
</Grid>
</StackPanel>
<!-- //Main -->
<!-- Footer -->
<StackPanel x:Name="stackPanelFooter" Grid.Row="1" Grid.Column="0">
<Border BorderBrush="#FF323232" BorderThickness="1" DockPanel.Dock="Top" Padding="0,0,0,0">
<Grid Background="#FF45474A">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0,20,0,20">
<Button x:Name="buttonPrevious" Content=" Previous " VerticalAlignment="Bottom" Click="buttonPrevious_Click" Style="{StaticResource btn_default}" HorizontalAlignment="Left" Margin="0,0,10,0" />
<Button x:Name="buttonNext" Content=" Next " VerticalAlignment="Bottom" Click="buttonNext_Click" Style="{StaticResource btn_default_success}" HorizontalAlignment="Left" />
</StackPanel>
</Grid>
</Border>
</StackPanel>
<!-- //Footer -->
</Grid>
</Window>
The program is C# WPF with .NETFramework v4.7.2.
For Main, I replaced stackpanel with Grid layout and added VerticalAlignment="Stretch".
<Grid x:Name="stackPanelMain" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" >
<Grid Background="#FF45474A" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="400*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="stackPanelLeft" Grid.Row="0" Grid.Column="0" Background="#FF393939" Margin="0,0,20,0">
<!-- Left content -->
<Label x:Name="labelProjects" Content="New project" Margin="0,20,0,0" FontSize="16" Foreground="#FFBABAA8" FontWeight="Bold"/>
<Label x:Name="labelNewProjectStep01" Content="Project information" Margin="0,0,0,0" FontSize="14" Foreground="#FFBABAA8" FontStyle="Italic" />
<Label x:Name="labelNewProjectStep02" Content="Automated tasks" Margin="0,0,0,0" FontSize="14" Foreground="#FFBABAA8" />
<Label x:Name="labelNewProjectStep03" Content="Search" Margin="0,0,0,0" FontSize="14" Foreground="#FFBABAA8" />
<!-- //Left content -->
</StackPanel>
<StackPanel x:Name="stackPanelRight" Grid.Row="0" Grid.Column="1">
<!-- Right content -->
<DockPanel x:Name="dockPanelMain" LastChildFill="False">
<!--<local:NewProjectStep01ProjectInformationUserControl x:Name="newProjectStep01ProjectInformationUserControl" Panel.ZIndex="0" />
<local:NewProjectStep02AutomatedTasksUserControl x:Name="NewProjectStep02AutomatedTasksUserControl" Panel.ZIndex="1" />
<local:NewProjectStep03SearchUserControl x:Name="NewProjectStep03SearchUserControl" Panel.ZIndex="2" />-->
</DockPanel>
<!-- //Right content -->
</StackPanel>
</Grid>
</Grid>

WPF telerik RadRibbonView and RadRibbonWindow

I am using Telerik WPF UI RadRibbonWindow, RadRibbonView in my application. I have inherited RadRibbonWindow in the MainWindow class. I have added the proper Dlls for that with same version, but the control is not visible in Window. How can I solve this visibility problem? The project is building successfully.
<telerik:RadRibbonWindow x:Class="WpfApplication2.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:local="clr-namespace:WpfApplication2"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<telerik:RadRibbonView x:Name="theRibbon" Grid.Row="0" Grid.ColumnSpan="3">
<!-- Ribbon Tab #1: Home -->
<telerik:RadRibbonTab Header="Home" telerik:KeyTipService.AccessText="H">
<telerik:RadRibbonGroup Header="Clipboard">
<telerik:RadRibbonButton LargeImage="/Resources/Icons/cut.png" Text="Cut"/>
<telerik:RadRibbonButton LargeImage="/Resources/Icons/paste.png" Text="Paste" />
<telerik:RadRibbonButton LargeImage="/Resources/Icons/copy.png" Text="Copy" />
</telerik:RadRibbonGroup>
<telerik:RadRibbonGroup Header="Show">
<telerik:RadRibbonButton Text="Close Table" Size="Large"
LargeImage="/Resources/Icons/closetable.png"/>
<telerik:RadRibbonButton Text="Close All" Size="Large"
LargeImage="/Resources/Icons/closeall.png"/>
<!--<Fluent:Button Header="Close Table" Click="CloseTable_Click" SizeDefinition="Large, Middle, Small"
Icon="/Resources/Icons/closetable.png" LargeIcon="/Resources/Icons/closetable.png"/>-->
<StackPanel Orientation="Horizontal" Margin="2">
<CheckBox IsChecked="True"
VerticalAlignment="Center" HorizontalAlignment="Center" Width="15" Height="15"
/>
<telerik:Label Content="Status bar" Padding="0" Margin="5,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="2">
<CheckBox VerticalAlignment="Center" IsChecked="True"
HorizontalAlignment="Center" Width="15" Height="15">
</CheckBox>
<telerik:Label Content="Folder list" Padding="0" Margin="5,0,0,0"/>
</StackPanel>
</telerik:RadRibbonGroup>
<telerik:RadRibbonGroup Header="Publish">
<telerik:RadRibbonButton Name="printBtn" LargeImage="/Resources/Icons/print.png" Text="Print..." telerik:KeyTipService.AccessText="P" />
<telerik:RadRibbonButton Name="exportBtn" LargeImage="/Resources/Icons/export.png" Text="Export..." telerik:KeyTipService.AccessText="E" />
</telerik:RadRibbonGroup>
<telerik:RadRibbonGroup Header="Edit">
<telerik:RadToggleButton Name="lockBtn" />
<telerik:RadRibbonButton Name="appendRowBtn" Size="Large, Medium, small" SmallImage="/Resources/Icons/appendrow.png"
LargeImage="/Resources/Icons/appendrow.png" Text="Append Row" />
<telerik:RadRibbonButton Name="addAboveBtn" LargeImage="/Resources/Icons/addabove.png"
Text="Add Above" VerticalContentAlignment="Center"/>
<telerik:RadRibbonButton Name="addBelowBtn" LargeImage="/Resources/Icons/addbelow.png" Text="Add Below" />
<telerik:RadRibbonButton Name="deleteRowBtn" LargeImage="/Resources/Icons/deleterow.png" Text="Delete Row" />
<telerik:RadRibbonButton Name="commitBtn" Size="Medium" SmallImage="/Resources/Icons/commit.png" Text="Commit" />
<telerik:RadRibbonButton Name="rollbackBtn" Size="Medium" SmallImage="/Resources/Icons/commit.png" Text="Rollback"/>
</telerik:RadRibbonGroup>
<telerik:RadRibbonGroup Header="Font">
<StackPanel Orientation="Horizontal" Margin="2,5">
<telerik:RadComboBox Name="fontComboBox" Width="120" Margin="0" IsEditable="True"
ToolTip="Font" SelectedIndex="0"
IsReadOnly="True" >
<telerik:RadComboBoxItem Content="Time New Roman"/>
<telerik:RadComboBoxItem Content="Arial"/>
<telerik:RadComboBoxItem Content="Century Gothic"/>
<telerik:RadComboBoxItem Content="Comic Sans MS"/>
<telerik:RadComboBoxItem Content="Calibri"/>
</telerik:RadComboBox>
<telerik:RadComboBox Name="fontSizeComboBox" Width="40"
ToolTip="Font Size"
SelectedIndex="1"
IsReadOnly="True"
IsEditable="True"
Margin="0" >
<telerik:RadComboBoxItem Content="10"/>
<telerik:RadComboBoxItem Content="12"/>
<telerik:RadComboBoxItem Content="14"/>
<telerik:RadComboBoxItem Content="16"/>
<telerik:RadComboBoxItem Content="18"/>
</telerik:RadComboBox>
<StackPanel Orientation="Horizontal" Margin="2">
<CheckBox Name="AltCheckBox" Width="20" VerticalAlignment="Center" />
<TextBlock VerticalAlignment="Center" Text="Alternate"/>
</StackPanel>
</StackPanel>
</telerik:RadRibbonGroup>
<telerik:RadRibbonGroup Header="Search">
<TextBox x:Name="searchBox" FocusManager.IsFocusScope="True" Margin="2"
HorizontalAlignment="Right" VerticalAlignment="Center" />
</telerik:RadRibbonGroup>
</telerik:RadRibbonTab>
</telerik:RadRibbonView>
and I am inheriting as:
public partial class MainWindow :RadRibbonWindow { public MainWindow () { InitializeComponent (); }
dlls added by me:
Telerik.Windows.Controls, Telerik.Windows.Controls.Input, Telerik.Windows.Controls.Navigation, Telerik.Windows.Controls.RibbonView, I have added these assemblies with same versions. 2016.2.613.45 And I am Using VS2013 Telerik.Windows.Controls.Data,
what changes should i made in code so that RadRibbonWindow will be visible in mainWindow, here I have created WPF Application project.

Flickering and blurry text

I have an issue with a text. In some custom usercontrols it is flickering every more/less second (probably when rendering) here is a gif:
I'm using these render and text options for now which are applied on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="HighQuality"
I was using these before:
RenderOptions.ClearTypeHint="Enabled"
RenderOptions.BitmapScalingMode="Linear"
TextOptions.TextRenderingMode="Grayscale"
TextOptions.TextFormattingMode="Display"
and it was ok but the text was too sharp.
XAML of this specific component:
<UserControl x:Class="FunctionButton" x:Name="PART_Base"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" xmlns:ViewModels="clr-namespace:SkyPCTool"
xmlns:materialDesign="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
mc:Ignorable="d"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
MinHeight="52" d:DesignWidth="300" Margin="0">
<UserControl.DataContext>
<ViewModels:FunctionButtonViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<ViewModels:TextToVisibilityConverter x:Key="textConverter" />
</UserControl.Resources>
<Border CornerRadius="2" Background="{StaticResource MaterialDesignPaper}">
<Grid Margin="12,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Button x:Name="PART_Button" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="12,6" Content="{Binding ButtonCaption}" />
<Grid Grid.Column="1" Margin="6,0">
<Image Source="{Binding Icon}" ToolTip="{Binding IconTag}" />
</Grid>
<Grid Grid.Column="2" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Title}" RenderOptions.ClearTypeHint="Enabled" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="14" />
<TextBlock Grid.Row="1" Text="{Binding Description}" RenderOptions.ClearTypeHint="Enabled" Margin="12,0,0,0" Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource textConverter}}" FontWeight="Normal" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="12.667" />
</Grid>
</Grid>
</Border>
I did it. I downloaded the Roboto font from Google website, then I set these options on Window:
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextHintingMode="Animated"
TextOptions.TextRenderingMode="ClearType"

'Controls' is an undeclared prefix; XML is not valid

So here's my xaml:
<Window x:Class="KinectButton.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:Coding4Fun.Kinect.Wpf.Controls;assembly=Coding4Fun.Kinect.Wpf"
Title="Weather" Height="1024" Width="1280" WindowStartupLocation="CenterScreen">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="812*" />
<ColumnDefinition Width="446*" />
</Grid.ColumnDefinitions>
<Canvas Background="#FF371780" Grid.ColumnSpan="2">
<Controls:HoverButton Margin="0" Padding="0" x:Name="kinectButton" ImageSize="50"
ImageSource="/Images/RightHand.png"
ActiveImageSource="/Images/RightHand.png"
TimeInterval="2000" Panel.ZIndex="1000" Canvas.Left="0" Canvas.Top="0" />
<Button x:Name="button1" Content="Close" Height="141" Canvas.Left="979" Canvas.Top="6" Width="273" Background="#FFFFF600" FontSize="53.333" Click="button1_Click" BorderThickness="4" Foreground="#FF1A1717" />
<Label Canvas.Left="0" Canvas.Top="733" Content="" Height="1024" Name="message" Width="1280" Foreground="White" FontSize="40" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
<Image Height="128" Name="videoStream" Stretch="Fill" Width="191" Canvas.Left="539" Canvas.Top="825" />
</Canvas>
</Grid>
</Window>
And it keeps giving the error:
''Controls' is an undeclared prefix. Line 11, position 14.' XML is not valid.
Build -> Clean Solution
Build -> Rebuild Solution
Just tested your XAML - everything is valid and should not cause any problems.

Frame to Page Navigation

am trying to goto a page from main window by using I have put 4 rectangle around window for framing of main window .
But when I Navigate to page my bottom rectangle is getting shifted(as shown in picture. Its completely ok in main window.
my .xaml file for mainWindow is
<Window x:Class="Demo1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Demo" Height="652" Width="924" WindowStyle="None" ShowInTaskbar="True" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded"
>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
<!--change here-->
<Button Content="Button" Height="40" Name="button1" Width="89" Click="button1_Click" />
</DockPanel>
</Border>
<!--Bottom polygon-->
<DockPanel Height="74" Width="888" Margin="-846,520,10,-10">
<Polygon Name="polygon11" Points="0,60,80,0,810,0,875,60" Fill="LightCyan" Height="58" Width="890" Canvas.Left="-9" Canvas.Top="12" />
</DockPanel>
<!--left side polygon-->
<Canvas Height="557" Name="canvas5" Width="72" Margin="-1030,0,700,0" >
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" Height="582" Width="67" Canvas.Top="1" Canvas.Left="18" />
</Canvas>
<!--Top polygon-->
<Canvas Height="55" Name="canvas7" Width="857" Margin="-890,-555,0,0" >
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" Height="59" Width="870" Canvas.Top="13" Canvas.Left="8" />
</Canvas>
<!--Right side polygon-->
<Canvas Height="545" Name="canvas6" Width="72" Margin="-80,40,0,80">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan" Height="583" Width="60" Canvas.Top="-14" Canvas.Left="12" />
</Canvas>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
xaml.cs file is
private void button1_Click(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(new message_box.Page1());
}
Page1 has this code
<Page x:Class="message_box.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="652" d:DesignWidth="924"
Title="Page1">
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
</DockPanel>
</Border>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
</Page>
You should place your items in a Grid instead. I updated what you should try, but you will have to update your polygons
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Frame Grid.Column="1" Grid.Row="1"/>
<Grid Grid.ColumnSpan="3" Grid.Row="3">
<Polygon Points="0,60,80,0,810,0,875,60" Fill="LightCyan"/>
</Grid>
<Grid Grid.Column="0" Grid.RowSpan="3">
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" />
</Grid>
<Canvas Grid.ColumnSpan="3" Grid.Row="0">
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" />
</Canvas>
<Canvas Grid.Column="2" Grid.RowSpan="3">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan"/>
</Canvas>
</Grid>

Resources