First of all, thank you for taking your time to read this.
Im pretty new to WPF and especially to using MahApps - http://mahapps.com
Im having problems switching between pages that I have created using MahApps in my window.
Here is my starting window (MainWindow):
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" x:Class="WpfApplication.MainWindow"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
Dialog:DialogParticipation.Register="{Binding}"
Title="MainWindow"
Height="600"
Width="800">
<Grid>
<Frame x:Name="Main"/>
</Grid>
Here is the page that I want to move to (I created a frame in the main so I could put the content of this page on it):
<Controls:MetroWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" x:Class="WpfApplication.MainMenu"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
Dialog:DialogParticipation.Register="{Binding}"
Title="MainMenu"
Height="600"
Width="800" NonActiveBorderBrush="#FFC32C2C">
<Grid>
<Image x:Name="Background" Source="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/teaserBackground.jpg" Stretch="UniformToFill">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="17" />
</Image.BitmapEffect>
</Image>
<Image x:Name="Logo" Source="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/Trivia.png" Margin="0,60,0,320" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBox x:Name="Username" Controls:TextBoxHelper.Watermark=" USERNAME" Margin="0,308,0,226" Width="200" Height="35" TextAlignment="Justify" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" />
<TextBox x:Name="Password" Controls:TextBoxHelper.Watermark=" PASSWORD" Margin="0,378,0,156" Width="200" Height="35" TextAlignment="Justify" FontSize="20" FontWeight="Bold" />
<Button x:Name="SignIn" Content="" HorizontalAlignment="Left" Margin="407,435,0,0" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignIn_Click">
<Button.Background>
<ImageBrush ImageSource="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/signIn.png"/>
</Button.Background>
</Button>
<Button x:Name="SignUp" Content="" HorizontalAlignment="Left" Margin="310,435,0,0" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignUp_Click">
<Button.Background>
<ImageBrush ImageSource="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/sign-add-icon.png"/>
</Button.Background>
</Button>
</Grid>
Thank you in advance!
Updated answer:
Frames themselves are meant to load pages and your menu item is inheriting from a window so that will never work.
Here are the mods you need to make:
In your MainWindow.xaml change the Window tag to Controls:MetroWindow (like you have in your MainMenu xaml
In your MainWindow.xaml.cs remove the base class reference for the MainWindow (MainWindow : Window becomes just MainWindow)
In your MainMenu.xaml change Controls:MetroWindow to just UserControl
Back in your MainWindow.xaml, add a ref to your namespace xmlns:my="clr-namespace:WhateverHere"
In MainWindow.xaml, remove the and add your control directly instead
MainWindow.xaml
<Controls:MetroWindow x:Class="WPFDeleteMe.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:my="clr-namespace:WPFDeleteMe"
Title="MainWindow" Height="700" Width="900">
<Grid x:Name="RootGrid">
<my:MainMenu></my:MainMenu>
</Grid>
</Controls:MetroWindow>
MainWindow.xaml.cs
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
}
}
MainMenu.xaml
<UserControl x:Class="WPFDeleteMe.MainMenu"
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="600" d:DesignWidth="800">
<Grid>
<Image x:Name="Background" Source="d:\images\doll-161405_960_720.png" Stretch="UniformToFill">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="17" />
</Image.BitmapEffect>
</Image>
<Image x:Name="Logo" Source="d:\images\Carestream_Solutions.gif" Margin="0,0,0,0" Width="150" Height="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button x:Name="SignIn" Content="" HorizontalAlignment="Left" Margin="407,435,0,0" VerticalAlignment="Top" Width="80" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignIn_Click">
<Button.Background>
<ImageBrush ImageSource="d:\images\war_kitten.jpg"/>
</Button.Background>
</Button>
<Button x:Name="SignUp" Content="" HorizontalAlignment="Left" Margin="310,435,0,0" VerticalAlignment="Top" Width="80" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignUp_Click">
<Button.Background>
<ImageBrush ImageSource="d:\images\war_kitten.jpg"/>
</Button.Background>
</Button>
</Grid>
</UserControl>
Related
I have a simple application I'm trying to make.
The idea is to start with a login screen and then move to an admin screen. For this, after looking for answers I stumbled upon Frames and Pages. The problem that I'm having now is that it seems that Pages are not compatible with translucency?
This is what I get when using Frame and Page:
This is what I want to replicate:
This is the main window with pages:
<Window
x:Class="Membership2.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:Membership2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1366"
AllowsTransparency="True" WindowStyle="None" Background="Transparent"
WindowStartupLocation="CenterScreen">
<Grid>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden"/>
</Grid>
</Window>
As you can see, Background property is set to Transparent, but it does nothing. I also tried setting the Grid Background and Frame Background to Transparent without success.
Also, WindowStartupLocation is set to CenterScreen when using Pages, but it also does nothing it seems.
EDIT:
So this problem arises when StartupUri (in App.xaml) is set to my LoginPage.xaml instead of the MainWindow.xaml (described previously).
This is my LoginPage.xaml:
<Page x:Class="Membership2.LoginPage"
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:Membership2"
mc:Ignorable="d"
d:DesignHeight="550" d:DesignWidth="450"
MaxHeight="550" MaxWidth="450"
Title="LoginPage"
RenderOptions.ClearTypeHint="Enabled"
FontFamily="./Resources/Fonts/#Dosis"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
ShowsNavigationUI="False"
Background="Transparent"
>
<Grid
fw:PointerTracker.Enabled="True" Background="Transparent">
<Border
Background="WhiteSmoke"
CornerRadius="7"
Margin="30, 75, 30, 0">
</Border>
<Ellipse
Width="50"
Height="50"
Fill="WhiteSmoke"
Margin="0,-450,0,0">
</Ellipse>
<materialDesign:PackIcon
Kind="AccountCircle"
Width="150"
Height="150"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Grid.RowSpan="2"
FontSize="50"
Foreground="#7ea4b3"
Grid.Column="1">
</materialDesign:PackIcon>
<Label
Content="Administración"
HorizontalAlignment="Center"
Margin="0,140,0,0"
FontSize="30"
FontFamily="./Resources/Fonts/#Dosis">
</Label>
<TextBox
x:Name="Username"
Width="230"
Height="45"
FontSize="25"
TextWrapping="NoWrap"
Style="{StaticResource MaterialDesignTextBox}"
FontWeight="Light"
RenderOptions.ClearTypeHint="Enabled"
FontFamily="./Resources/Fonts/#Dosis"
Margin="0, 0, 0, 50"
materialDesign:HintAssist.Hint="Usuario">
</TextBox>
<PasswordBox
x:Name="Password"
Width="230"
Height="45"
FontSize="25"
FontWeight="Light"
RenderOptions.ClearTypeHint="Enabled"
Margin="0, 150, 0, 0"
BorderThickness="0,0,0,1"
materialDesign:HintAssist.Hint="Contraseña"
materialDesign:TextFieldAssist.DecorationVisibility="Visible">
</PasswordBox>
<Button
x:Name="Login"
Width="150"
Height="48"
VerticalAlignment="Bottom"
Margin="0,0,0,70"
FontSize="25"
FontWeight="Light"
Background="LightGray"
Style="{StaticResource ButtonRevealStyle}"
BorderThickness="2,2,2,2">
Ingresar
</Button>
</Grid>
</Page>
I have used grid extra to design individual responsive components in my WPF application. I have a View like following:
<UserControl x:Class="..."
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:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource SelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<TextBlock Text="{Binding Path=MessageL1Text}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageL2Text}" Style="{StaticResource MessageTextUrduStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
Next what I require was to bring a disable panel to flood over this user control disabling all the controls and graying out the UI like:
<UserControl x:Class="..."
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:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid Style="{StaticResource DisableGridStyle}" Opacity="0.8" Background="Gray">
</Grid>
As you can see next I wrap both in a container Panel and will keep the disabled control hidden till I want it to appear on top of the actual panel using Grid and Grid.Zindex in somewhat manner like explained in this answer.
I have tried it and it works like a charm.
So now let's move on to my actual requirement which is to bring up one of the child component of the actual panel say the following on top while keeping the others behind the disabled panel;
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
I tried to do it by tweaking the Z-index for the said component but it did not work for me. I do not know if this is being caused by grid extra but using grid extra is a constraint that I cannot let go. Thus, what I need is a solution to get the required results using grid extra. Thanks in advance.
Note details about GridExtra can be viewed here.
Z Index is used to control the ordering of the elements that are at the same level in your components heirarchy. As per you state that:
As you can see next I wrap both in a container Panel and will keep the disabled control hidden till I want it to appear on top of the actual panel using Grid and Grid.Zindex
I believe in doing so, your required component is not at the same level as your disable panel and it would not be possible to bring it up using the Z-Index.
One alternate solution that I can think of is to have multiple disable panels with same properties and use one at the same sibling level at the component that you wish to send back or bring in front.
As an example consider the following code:
<Window x:Class="ZindexForVaryingChildren.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:ZindexForVaryingChildren"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid ge:GridEx.RowDefinition="*,*"
ge:GridEx.TemplateArea="R1/ R2/" Opacity="0.8" Background="Red">
<TextBlock Opacity="0.8" Background="Red" Grid.ZIndex="2" ge:GridEx.Area="0,0,2,2" HorizontalAlignment="Stretch"/>
<Grid ge:GridEx.AreaName="R1" Grid.ZIndex="1">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
<Grid ge:GridEx.AreaName="R2" Grid.ZIndex="3">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
</Grid>
Here you can see even using the GridExtra I have tried to illustrate how you can bring the R2 to front when pushing R1 to back. Also using the TextBlock as the disabler panel while you can use the component you wish.
The above will yield output as follows:
Also note this is one of the suggested solution you can totally work out a strategy of your own but have to keep in mind that Z-Index only works for siblings.
I ended up using my disable component as a sibling to the hierarchy as:
<UserControl x:Class="..."
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:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource NetworkSelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<local:DisablePanel Panel.ZIndex="3" ge:GridEx.Area="0,0,2,2" x:Name="DisableMessage"></local:DisablePanel>
<TextBlock Text="{Binding Path=MessageText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageUrduText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<local:DisablePanel ge:GridEx.Area="0,0,1,8" Panel.ZIndex="3" x:Name="DisableCompany"></local:DisablePanel>
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
Although using much of the approach in the above answer yet adding it for clarifying idea to others.
I would like to use the basic grip. but I don't see where I could change its position. Now if you look my picture you can see I disabled the borders and gave some shadows to the main rectangle. I would like to keep it that way.
I wonder if there is a simple modification next to this "ResizeMode="CanResizeWithGrip"
Code:
<Window x:Class="Serenity.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:Serenity"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="1100" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}" MinWidth="720" MinHeight="480" Icon="Images/CloseBlack.png" ResizeMode="CanResizeWithGrip">
<Grid>
<Rectangle x:Name="MainTable" Fill="#FF1A1A1A" Margin="10" Stroke="Black" StrokeThickness="1.0">
<Rectangle.Effect>
<DropShadowEffect x:Name="Shadow" BlurRadius="13" ShadowDepth="0" Color="Black"/>
</Rectangle.Effect>
</Rectangle>
<Button x:Name="Website" Content="Google" Margin="0,0,38,38" Click="button_Click" Background="#FF48484A" BorderBrush="{x:Null}" Foreground="White" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" AutomationProperties.HelpText="You will close the program." Height="28" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="99"/>
<Rectangle x:Name="TitleBar" Fill="#FF2D2D30" Height="43" Margin="10,10,10,0" Stroke="Black" VerticalAlignment="Top" MouseDown="TitleBar_MouseDown"/>
<Button x:Name="CloseB" Content="Exit" Margin="0,18,19,0" BorderBrush="{x:Null}" Foreground="White" HorizontalAlignment="Right" Width="50" Height="24" VerticalAlignment="Top" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" RenderTransformOrigin="-0.25,1.45" Click="CloseB_Click" Background="#FF48484A" OpacityMask="Black" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</Grid>
I have tried and succeeded
<Style TargetType="{x:Type ResizeGrip}">
<Setter Property="Margin" Value="25"/>
</Style>
In Windows 10 Universal app development the ScrollViewer causes App crashes. In the Windows dev Center this was also mentioned but not solved (https://social.msdn.microsoft.com/Forums/windowsapps/en-US/a737f407-d59f-4b10-a7d0-de9ead6d4f5f/uwpscrollviewer-occasional-crash?forum=wpdevelop).
Now my Problem:
I put a second grid on the Standard one of the xaml file. Then I added the ScrollViewer to this grid. After that i put another grid on the scrollviewer and then i added some Buttons to this grid. When scrolling the app crashes very often.
Do you have any idea how to fix that or how it can be done different?
Here the Code:
<Page
x:Class="ProjectMoralsKite.Datenbank"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ProjectMoralsKite"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="grid">
<Grid.Background>
<ImageBrush Stretch="Fill"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="529" Margin="10,10,0,0" VerticalAlignment="Top" Width="340" BorderThickness="0,-1,0,0" Background="White" Opacity="0.6"/>
<TextBlock x:Name="textBlock" TextAlignment="Center" HorizontalAlignment="Left" Margin="6,70,0,0" TextWrapping="Wrap" Text="Verwaltung" VerticalAlignment="Top" Width="340" FontSize="29.333"/>
<Button x:Name="button" Content="Zurück" HorizontalAlignment="Left" Margin="10,507,0,0" VerticalAlignment="Top" Width="150" Click="button_Click"/>
<ScrollViewer HorizontalAlignment="Left" Height="380" Margin="10,109,0,0" VerticalAlignment="Top" Width="340">
<Grid HorizontalAlignment="Left" Height="655" VerticalAlignment="Top" Width="340">
<Button x:Name="button1" Content="Plan" HorizontalAlignment="Left" Margin="0,24,0,0" VerticalAlignment="Top" Height="54" Width="340"/>
<Button x:Name="button1_Copy" Content="Kunden" HorizontalAlignment="Left" Margin="0,83,0,0" VerticalAlignment="Top" Height="54" Width="340" Click="button1_Copy_Click"/>
<Button x:Name="button1_Copy1" Content="Baustellen" HorizontalAlignment="Left" Margin="0,142,0,0" VerticalAlignment="Top" Height="54" Width="340" Click="button1_Copy1_Click"/>
<Button x:Name="button1_Copy2" Content="Aufträge" HorizontalAlignment="Left" Margin="0,201,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33000000" Click="button1_Copy2_Click"/>
<Button x:Name="button1_Copy3" Content="Zuweisung" HorizontalAlignment="Left" Margin="0,260,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33FF0000"/>
<Button x:Name="button1_Copy4" Content="Rechteverwaltung" HorizontalAlignment="Left" Margin="0,319,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33FF0000"/>
</Grid>
</ScrollViewer>
</Grid>
</Page>
Am newbie to wpf development.In my wpf app i used user control.what i need is in runtime how can resize the user control,
Please help me to find solution,if my approach is wrong please guide me to get solution,
My XAML code is
<UserControl x:Class="test.pad"
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="300" d:DesignWidth="300" Focusable="True" OverridesDefaultStyle="False">
<Grid Width="102" Height="123" Name="Grid1" MouseMove="Grid1_MouseMove" MouseUp="Grid1_MouseUp" MouseDown="Grid1_MouseDown">
<Grid.RenderTransform>
<TranslateTransform x:Name="tt"/>
</Grid.RenderTransform>
<Border BorderBrush="Silver" BorderThickness="2">
<Canvas Height="120" HorizontalAlignment="Left" Margin="0,1,0,0" Name="canvas1" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2">
<RichTextBox Height="98" HorizontalAlignment="Left" Margin="0,24,0,0" Name="richTextBox1" VerticalAlignment="Top" Width="100" BorderThickness="2" Grid.ColumnSpan="2" Background="#FFFF96D8" Canvas.Top="-3" Canvas.Left="-1" />
<Button BorderBrush="#FFFF96D8" Canvas.Left="46" Canvas.Top="-2" Height="23" Name="close" Width="27">
</Button>
<Button Height="23" Name="minimise" Width="27" BorderBrush="#FFFF96D8" Click="button1_Click" Canvas.Left="72" Canvas.Top="-2" ClipToBounds="False" IsEnabled="True" IsHitTestVisible="True" OverridesDefaultStyle="False" ForceCursor="False" Foreground="Black" MouseMove="button1_MouseEnter" MouseLeave="button1_MouseLeave">
</Canvas>
</Border>
</Grid>
</UserControl>
thanks
ash
Remove the Height and Width of the UserControl and also the Grid.
Set the Margin or Size Property for UserControl where you call it.