I am new to WPF , i can't find a way to open a new WPF window on the same main WPF app
i tried Frame method , here is the code :-
<Window x:Class="WPF_FINAL.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:WPF_FINAL"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
Height="768"
Width="1366"
WindowState="Maximized"
Title="MainWindow">
<Grid Background="#dff9fb"
Margin="33,10,-33,-10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="13.5" />
<ColumnDefinition Width="152" />
<ColumnDefinition Width="auto"
MinWidth="335.5" />
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Frame Margin="0,0,0.5,10"
Grid.ColumnSpan="5"
x:Name="main"
Grid.RowSpan="6">
</Frame>
</Grid>
</Window>
cs code
main.Content = new Window1();
but when i run it gives me break exception
i tried also navigation service but i found it's only associated with Pages
any suggestion how to do this ?
thank you
A Frame can host any content, even HTML.
The Page only exposes special helpers like the NavigationService to make navigation between pages more convenient.
A Window can not be the child of another element e.g. child of Frame. It must be the root element. By assigning the Window to Frame.Content the Frame beceomes the parent of the Window, which is illegal.
A simple solution would be to convert the Window1 class to a UserControl:
<UserControl x:Class="MyUserControl">
<TextBlock Text="TEST CONTROL" FontSize="25"/>
</UserControl>
Now your assignment will work:
main.Content = new MyUserControl();
or
main.Navigate(new MyUserControl());
or
main.Navigate("file path to/MyUserControl.xaml");
Related
I am new to C# and WPF development, and I am working on a program that encodes and decodes bitmaps. I have the following XAML code and its expected output:
<Page x:Class="Thompson_EncodeDecode.BeforeDecoding"
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:Thompson_EncodeDecode"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="BeforeDecoding">
<Grid Margin="10,0,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Height="35" Padding="5" Background="White">
<Label VerticalAlignment="Center" Foreground="Black">Before Encoding</Label>
</Border>
<Border Grid.Column="1" Height="35" Padding="5" Background="White">
<Label VerticalAlignment="Center" Foreground="Black"> After Encoding</Label>
</Border>
</Grid>
What I am trying to do is add an image onto both columns of the grid so that I can show that the images are the same, but also below that show what the encoded and decoded message within the bitmap is to show that the encoding is actually working. I am unsure how to add an image to the column without either making the image the background for the grid, and also maintaining the Grid integrity.
Also some extra pointers on how to have the input data shown on the bottom right of the grid column would be helpful too. Most of the Googling I have been doing regarding this particular program has confused me, and I am wondering if there is a standard way of approaching it.
You can achieve this in many ways, one of the way is as follows
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- U can move this duplicate code into an usercontrol to reuse-->
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<!--Header-->
<RowDefinition Height="1*"/>
<!--Body-->
<RowDefinition Height="8*"/>
<!--Footer-->
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Label Content="Header" Grid.Row="0"/>
<Image Grid.Row="1"/>
<Label Content="footer" Grid.Row="2" HorizontalContentAlignment="Right"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<!--Header-->
<RowDefinition Height="1*"/>
<!--Body-->
<RowDefinition Height="8*"/>
<!--Footer-->
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Label Content="Header" Grid.Row="0"/>
<Image Grid.Row="1"/>
<Label Content="footer" Grid.Row="2" HorizontalContentAlignment="Right"/>
</Grid>
</Grid>
I'm using Mahapps.Metro.SimpleChildWindow to show a data input window. I would like for the entry window to be moveable. I've set "AllowMove" in my XAML markup, but the window still isn't moveable. Here is the XAML I'm using:
<UserControl x:Class="Project.Views.View"
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:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:simpleChildWindow="clr-namespace:MahApps.Metro.SimpleChildWindow;assembly=MahApps.Metro.SimpleChildWindow"
Dialog:DialogParticipation.Register="{Binding}"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid x:Name="RootGrid">
<simpleChildWindow:ChildWindow CloseByEscape="True"
ChildWindowWidth="500"
ChildWindowHeight="200"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="10"
ChildWindowImage="None"
BorderBrush="{DynamicResource AccentBaseColorBrush}"
GlowBrush="{DynamicResource AccentColorBrush}"
IsModal="True"
AllowMove="True"
IsOpen="{Binding IsChildWindowOpen}"
Title="View/Edit ">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Child Window Content -->
</Grid>
</simpleChildWindow:ChildWindow>
<-- Other controls and stuff -->
</Grid>
</UserControl>
I'm opening and closing the child window from the ViewModel by setting IsChildWindowOpen to true or false.
I have been looking at the examples on GitHub but the example with the moveable window is using XAML that is in an external file. I was using XAML nested in the current view so that I could bind to the current ViewModel instance.
What do I need to change to make the window moveable?
Okay, I figured it out. I needed to remove
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Center"
VerticalAlignment="Center"
from the window declaration.
<simpleChildWindow:ChildWindow CloseByEscape="True"
ChildWindowWidth="500"
ChildWindowHeight="180"
Margin="10"
BorderThickness="1"
ChildWindowImage="None"
BorderBrush="{DynamicResource AccentBaseColorBrush}"
CloseOnOverlay="True"
GlowBrush="{DynamicResource AccentColorBrush}"
AllowMove="True"
IsOpen="{Binding IsChildWindowOpen}"
</simpleChildWindow:ChildWindow>
I have a user control with a text box and 2 buttons below it. I want the text box to stretch vertically when the parent window stretches vertically but nothing happens. Another problem is that the buttons appear bunched up under the text box when the user control is put into a window. But when I view the user control while not in a window the buttons are separated by 1 grid row. How can I get this to work properly so the text box increases in size when the parent window is stretched vertically and also have the buttons at the bottom stay away from the text box?
Here is the xaml code for the window that uses the user control:
<Window x:Class="SerialNumTool.Views.test2View"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
Title="test2View" Height="300" Width="300"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Cyan" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
</Grid.RowDefinitions>
<StackPanel Name="MainContentAreaStackPanel" Margin="0" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2">
<local:UserControl2 VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
</local:UserControl2>
</StackPanel>
</Grid>
</Window>
Here is the user control code:
<UserControl x:Class="SerialNumTool.UserControls.UserControl2"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
d:DesignHeight="150" d:DesignWidth="200"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Beige" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
</Grid.RowDefinitions>
<StackPanel Background="Green" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="2">
<TextBox x:Name="TextOutputAreaTextBox"
HorizontalAlignment="Stretch" Margin="5"
VerticalAlignment="Stretch" AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
TextWrapping="Wrap" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Green" Grid.Column="0" Grid.ColumnSpan="2"
Margin="0,0,0,0" Grid.Row="4" Grid.RowSpan="1" HorizontalAlignment="Stretch" >
<Button Content="Operation 2" Margin="5"></Button>
<Button Content="Operation 3" Margin="5"></Button>
</StackPanel>
</Grid>
</UserControl>
Thanks in advance.
You can greatly simplify your markup by using just grids.
You seem to have misunderstood the way the * gridmeasure works.
I think the markup below does what you're trying to achieve.
When you put most controls in a grid(cell) they will expand to take up all the space available. That's what you want here so all you want is grids and cells.
The * is not an abstracted measure of the actual height in the way you are using it.
You had a control spanning two rows.
I simplified that by making one of the rows 2* height.
If you wanted two controls in the right column next to it then you would of course probably want 5 rows. But you don't have that.
xmlns:local="clr-namespace:wpf_99"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
>
<Grid Background="Cyan" >
<local:UserControl2/>
</Grid>
</Window>
and
d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="Beige" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox x:Name="TextOutputAreaTextBox"
HorizontalAlignment="Stretch"
Margin="5"
VerticalAlignment="Stretch"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
TextWrapping="Wrap" />
<Button Content="Operation 2" Margin="5" Grid.Row="4"></Button>
<Button Content="Operation 3" Margin="5" Grid.Row="4" Grid.Column="1"></Button>
</Grid>
</UserControl>
Henk Holterman's comment to remove the StackPanel around the text solves the problem. The textbox would not vertically stretch in or outside a user control while inside a StackPanel. I had to remove the StackPanel around the textbox in the user control as well as in the window that used the user control. Below are the code updates for a working sample:
The User Control with StackPanel removed:
<UserControl x:Class="SerialNumTool.UserControls.UserControl2"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
d:DesignHeight="150" d:DesignWidth="200"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Beige" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<TextBox x:Name="TextOutputAreaTextBox" Grid.Column="0" Grid.Row="1"
HorizontalAlignment="Stretch" Margin="5"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal" Background="Green" Grid.Column="0" Grid.ColumnSpan="2"
Margin="0,0,0,0" Grid.Row="4" Grid.RowSpan="1" HorizontalAlignment="Stretch" >
<Button Content="Operation 2" Margin="5"></Button>
<Button Content="Operation 3" Margin="5"></Button>
</StackPanel>
</Grid>
</UserControl>
Here is the window that used the user control:
<Window x:Class="SerialNumTool.Views.test2View"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
Title="test2View" Height="300" Width="300"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Cyan" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
</Grid.RowDefinitions>
<local:UserControl2 VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2">
</local:UserControl2>
</Grid>
</Window>
I feel dumb for asking this, but how can I set a grid to use the whole space of my wpf page ? I can't seem to put its height to "*" and I'd like it to fill the whole "DesignHeight/Width" as I change them. Thank you !
<Page x:Class="Aud10.MenuHome"
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" Title="MenuHome" d:DesignHeight="860" d:DesignWidth="1196">
<Grid Height="860" Width="1196">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.333*" />
<ColumnDefinition Width="0.333*" />
<ColumnDefinition Width="0.333*" />
</Grid.ColumnDefinitions>
</Grid>
</Page>
Just remove the Width and Height settings altogether, then the Grid will fill up all available space automatically.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Label" Width="150" />
<TextBox Text="Value" Grid.Column="0" />
</Grid>
I have this Windows app:
<Window x:Class="PlayTube.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="800" Width="1400">
<Grid Background="#FFD86F6F">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Height="70" Background="#FF9A9A9A">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Height="25" Width="200" Name="SearchTextBox" />
<Button Grid.Column="2" Height="25" Width="80" Content="Search" Click="Button_Click" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MaxWidth="250" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="300" MaxWidth="350"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Background="#FFFFFF89">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC" />
<Grid Background="#FF05BECB" Grid.Column="2">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="3" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Grid Background="#FF4E04A7" Grid.Column="4">
<MediaElement Stretch="Fill" />
</Grid>
</Grid>
</Grid>
As you can see i have 3 Grids and i want to know if it possible the every grid will be managed from a class, because i dont want that all the logic will be in this main Windows class.
Right click on your project select the Add sub menu and then select user control, you should get this dialog.
Give the control a name and click ok
build your project and look in the toolbox, you should see right at the top that the new user control you added will be there.
drag this item in to the content of your grid and it should set everything up for you.
afer doing this my window now looks like
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:UserControl1 HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
</Grid>
</Window>