How to resize the user control in wpf at runtime - c#

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.

Related

How to make window transparent when using Frames and Pages?

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>

How to implement a grow only ScrollViewer

I want a stackpanel that will scroll after a min window size is hit but expand when the window grows horizontally.
I can make the grow functionality work if I drop the stack panel into a window and anchor it but then I can't scroll.
If I use a scrollViewer then I get the scroll bars but the stack panel never grows horizontally.
Basically I need an equivalent to WinForms AutoSizeMode GrowOnly
<Window
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:views="clr-namespace:Miner.Responder.Explorer.IncidentReview.Views"
x:Class="Miner.Responder.Explorer.IncidentReview.Views.IncidentReviewForm"
mc:Ignorable="d" Height="1069.2" Width="1096">
<ScrollViewer Margin="0,0,2,1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<StackPanel Height="1018" Width="1080" RenderTransformOrigin="0.5,0.5">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="0.057"/>
<RotateTransform/>
<TranslateTransform X="0.499"/>
</TransformGroup>
</StackPanel.RenderTransform>
<views:IncidentReviewView x:Name="ucIncident" Height="532" Margin="38,0" Width="Auto"/>
<views:TimeEditor x:Name="ucTimes" Height="166" Margin="38,0" Width="Auto"/>
<views:HistoryTables x:Name="ucHistory" Height="287"/>
<Grid Height="30">
<Button x:Name="BtnOk" Content="OK" Margin="0,0,6,2" RenderTransformOrigin="-0.36,0.558" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="75" />
<Button x:Name="BtnCancel" Content="Cancel" HorizontalAlignment="Right" Margin="0,0,166,2" VerticalAlignment="Bottom" Width="76" IsCancel="True" IsDefault="True"/>
<Button x:Name="BtnSave" Content="Save" HorizontalAlignment="Right" Margin="0,0,86,2" VerticalAlignment="Bottom" Width="75"/>
</Grid>
</StackPanel>
</ScrollViewer>

C# WPF Application Showing Pixelated Images / Texts

Today I have encourted something weird, which has never happened to me, and I didn't experience it anywhere before.
So let me go intol the detail, My friend have made a Photoshop Image with layers, which, I'll use to make him a software, but, when I try to add like layers 1 by one on a wpf app, and after fixing the aspect ratio by using the Stretch thingy, I have found out that it doesn't look exactly like the original picture in Photoshop, like, I have put all the layers, each one seperated of course, because, later I'll interact with them, let me show you some images.
but it still looks like there's some pixels missing and the text is not showing correctly.
This is the program interface:
This is the Photoshop image:
And this is my XML code:
<Window x:Class="OlympusSimple.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" ResizeMode="NoResize" WindowStyle="None" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="400" Width="800">
<Grid>
<Image Height="400" HorizontalAlignment="Left" Name="BackgroundUpbarBlur" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/BackgroundUpbarBlur.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="BackgroundUpbar" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/BackgroundUpbar.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Olympus" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Olympus.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Upbar" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/UpBar.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Minimize" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Minimize.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="FullScreen" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/FullScreen.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Close" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Close.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="SelectFile" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/SelectFile.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="SelectDestination" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/SelectDestination.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="ButtonDiscordUnready" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/ButtonDiscordUnready.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="RestoreAll" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/RestoreAll.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Tutorial" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Tutorial.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Twitter" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Twitter.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Patreon" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Patreon.png" Margin="0,0,0,0" />
<Image Height="400" HorizontalAlignment="Left" Name="Discord" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Top" Width="800" Source="/OlympusSimple;component/Images/Discord.png" Margin="0,0,0,0" />
</Grid>
I've searched and didn't find anything that could lead me to a solution, so if anyone can help me it'll be greatly appreciated.

Switch Pages In WPF using MahApps

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>

Scrolling with ScrollViewer causes App crash

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>

Categories