I want to make the page inside the frame to adjust it's size automatically whenever I resize the main window.
First, I used only stack panels in designing the page, then I put them inside the cells of the grid but it didn't work.
Main window xmal:
<Window x:Class="WpfApplication3.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:WpfApplication3"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1200">
<Grid Name="gridUI">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="207*"/>
<ColumnDefinition Width="122*"/>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="35*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Label Background="AliceBlue" FontSize="8" HorizontalAlignment="Left" Name="doc" Margin="0,0,0,26.333" Grid.RowSpan="2">Documents</Label>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1" Margin="4.667,0.333,121.565,0.333" Grid.ColumnSpan="2">
<Button Click="NewSample_Click">New Sample</Button>
<Button Click="CreateReport_Click">Create Report</Button>
</StackPanel>
<Button Grid.Row="1" Grid.Column="4" Margin="0,0.333,-0.334,0.333">Settting</Button>
<StackPanel Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Name="sp_doc" Margin="0,0.333,0.333,-0.333">
<StackPanel Orientation="Horizontal" >
<Button x:Name="sss" Click="sampleDropDown">s</Button>
<Label FontSize="12" Name="sam">Samples</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_s">
</StackPanel>
<StackPanel Orientation="Horizontal" >
<Button Click="reportDropDown">r</Button>
<Label>Reports</Label>
</StackPanel>
<StackPanel Orientation="Vertical" Name="sp_r">
</StackPanel>
</StackPanel>
<Frame x:Name="newSampleFrame" Grid.ColumnSpan="3" Content="" Grid.Column="1" HorizontalAlignment="center" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="center" Width="934" Height="456" NavigationUIVisibility="Hidden"/>
</Grid>
Page xmal :
<Page x:Class="WpfApplication3.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"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d"
d:DesignHeight="456" d:DesignWidth="934"
Title="Page1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<Border BorderBrush="Black" BorderThickness="0.5" Margin="5">-->
<StackPanel Margin="60" Grid.Row="0" Grid.Column="0" >
<StackPanel Orientation="horizontal" Margin="5">
<Label Margin="0,0,100,0">Length</Label>
<TextBox Width ="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,105,0">Width</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,99,0">Weight</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,116,0">Age</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,71,0">Casting Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,73,0">Testing Date</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin="0,0,21,0">Concrete Temperature</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<Label Margin ="0,0,91,0">Field No.</Label>
<TextBox Width="200"></TextBox>
</StackPanel>
</StackPanel>
<StackPanel Height="30" Width="120" Grid.Row="1" Grid.Column="1" Orientation="Horizontal" Margin="5">
<Button Width="50" Margin="0,0,10,0">Save</Button>
<Button Width="50">Cancel</Button>
</StackPanel>
<!--</Border>-->
</Grid>
For page "WpfApplication3.Page1" remove the
d:DesignHeight="456" d:DesignWidth="934"
and add Height="Auto" and Width="Auto". This will work
You could use a DockPanel as the outer contianer with LastChildFill set to full.
<DockPanel LastChildFill="True">
<Button Content="LastChildFill=True"/>
</DockPanel>
You would replace Button with the control that you want to fill the panel. An added bonus is that you can set other controls to dock on the other sides
<DockPanel LastChildFill="True">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>
I got those examples from here and there's more info: http://www.wpftutorial.net/DockPanel.html
Related
I've came across a problem where I'm trying to make a side bar in WPF. I've made the grid area for it and it seems to exist however when I try to put a label on it the label seems to be hidden behind the grid. I tried using z-index to no prevail however if I use a margin to move the text to the top of the form then it appears.
Red - The top of the form and where the form name is. (This is how the top is supposed to look
Orange - The left size is where the side bar is meant to be and the right is where messages will be shown.
Grey - By using a margin and moving the text up you can see that is displayed at the top where the name of the form
should be.
This is **not** how its supposed and should be where the
yellow is however it shows that if anything goes where the yellow is then
it is covered by the gray area as if it has a higher z-index.
My xaml is bellow
<Window x:Class="CrackleChat.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:CrackleChat" xmlns:viewmodel="clr-namespace:CrackleChat.MVVM.ViewModel"
mc:Ignorable="d"
Height="650" Width="1200" Icon="/Icon.png"
Background="#36393F"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip">
<Window.DataContext>
<viewmodel:MainViewModel></viewmodel:MainViewModel>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25">
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136">
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
</Window>
For your second subgrid add this: Grid.Row = "1" Otherwise both grids are in the same row (0 based index applies here)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/> <!--This is your second row-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136" Grid.Row="1"> <!--This goes to the second row-->
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
Edit: added modified code for better explanation.
I'm trying to create some bar charts from DotNetProjects.Wpf.Toolkit that display some data totals, though the data can change at run time. The problem is that I cannot get the chart to fit the size of the content - I always have to provide a fixed value (and setting Height="Auto" doesn't work), but I don't know what the size will need to be while running. What can I do to make my chart fit the content rather than the other way around?
My XAML code looks like this:
<Window
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:Movie_Vault"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Layout.Toolkit" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="Movie_Vault.frmStatistics"
mc:Ignorable="d"
Title="frmStatistics" Style="{StaticResource RoundedFormStyle}" WindowStartupLocation="CenterOwner">
<Border Style="{StaticResource WindowBorderStyle}">
<DockPanel x:Name="OuterPanel" >
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Top">
<DockPanel x:Name="TopPanel" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Image Height="16" Margin="8,4,8,4" Source="Images/process.png"/>
<TextBlock Style="{StaticResource MediumFont}"><Run Text="Statistics"/></TextBlock>
<DockPanel DockPanel.Dock="Right" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button x:Name="btnClose" Content="X" Style="{StaticResource MicroButtonStyle}" Margin="0,0,8,0" Click="btnClose_Click"/>
</DockPanel>
</DockPanel>
</Border>
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Left" Margin="0,8,0,0">
<DockPanel VerticalAlignment="Top" >
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="400" Width="500">
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
</ScrollViewer>
</DockPanel>
</Border>
</DockPanel>
</Border>
</Window>
What can I do to make my chart fit the content rather than the other way around?
Get rid of any StackPanels:
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
A StackPanel doesn't resize its children.
I'm using Material Design toolkit and I want to somehow set the DrawerHost to open or closed from the view model with a property. I have a property in the view model that is already updated from another source. I just need to translate that property to the xaml. Any help appreciated.
<UserControl x:Class="GS.Server.Focuser.FocuserView"
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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d">
<materialDesign:DrawerHost HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="2"
IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}"
BorderBrush="{DynamicResource MaterialDesignDivider}">
<materialDesign:DrawerHost.LeftDrawerContent>
<Grid Width="700">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ToggleButton DockPanel.Dock="Top" HorizontalAlignment="Right" Margin="5"
Style="{StaticResource MaterialDesignHamburgerToggleButton}"
Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
CommandParameter="{x:Static Dock.Left}"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}"/>
</StackPanel>
<Label Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">Focuser Settings Go Here</Label>
</Grid>
</materialDesign:DrawerHost.LeftDrawerContent>
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top"
Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
CommandParameter="{x:Static Dock.Left}"
Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<TextBlock Grid.Row="1" Text="This is the Focuser Page"
FontWeight="Bold" FontSize="18"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</materialDesign:DrawerHost>
Hi (sry for bad english) i have the problem that i create dynamic rows with label content in a grid but they dont begin at the top of the Grid.
private void SelectAccounts(string AccountUsername) //Findet Nutzer und Account ID und gibt alle Accounts des Nutzers aus //// neu machen jede reihe einzeln zurückgeben!!!!!!!
{
MId=database.GetID(this.MasterUsername,"MasterUser","MId"); //for database request
AccId = database.GetID(AccountUsername, "Accounts","AccId"); //for database request
AccountsList.Children.Clear(); //My Grid where i safe it
int rows = database.GetRows("Accounts", "AccID"); //How many Rows i have in my table
for (int i = 1; i <= rows; i++)
{
stringusername=database.GetUsernameById("Accounts","Username", i, MId); //getting the username back as string
if(username!="") // not evry username has the right condition so somtimes the function returns me only ""
{
Label l = new Label();
RowDefinition newRow = new RowDefinition();
newRow.Height = new GridLength(40);
AccountsList.RowDefinitions.Add(newRow);
l.Content = username;
AccountsList.Children.Add(l);
l.SetValue(Grid.RowProperty, i);
}
}
}
the problem is when i now start the programm it looks like this:
enter image description here
if i use the loop like this:
for (int i = 1; i <= rows; i++)
{
Label l = new Label();
RowDefinition newRow = new RowDefinition();
newRow.Height = new GridLength(40);
AccountsList.RowDefinitions.Add(newRow);
string username= database.GetUsernameById("Accounts", "Username", i, MId);
if(username!="")
{
l.Content = username;
AccountsList.Children.Add(l);
l.SetValue(Grid.RowProperty, i);
}
}
and it looks like this: enter image description here
I can normally add a label in the .xaml and it show normal on the top of the grid.
MyUserControll where i want to show the rows:
<UserControl x:Class="AccountManager.Login"
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="500" d:DesignWidth="750">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13*"/>
<ColumnDefinition Width="37*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Label Content="Your Accounts" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="21.333" FontFamily="Tekton Pro" FontWeight="Bold"></Label>
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="LightBlue" BorderThickness="1.5" VerticalAlignment="Bottom"/>
<Border BorderBrush="Blue" BorderThickness="1.5" VerticalAlignment="Bottom" Opacity="0.2"/>
<Border BorderBrush="Blue" BorderThickness="1.5" HorizontalAlignment="Right" Opacity="0.2"/>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="146*"/>
<ColumnDefinition Width="348*"/>
<ColumnDefinition Width="91*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="Blue" BorderThickness="1.5" Opacity="0.2" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110*"/>
<ColumnDefinition Width="191*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Content="Benutzername:" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="90"/>
<TextBox x:Name="addBenutzername" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" />
<PasswordBox x:Name="addPw" Grid.Row="1" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" ></PasswordBox>
<Label Grid.Row="1" Grid.Column="0" Content="Password:" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="62"/>
<Label x:Name="repeatPasswordLabel" Grid.Row="2" Grid.Column="0" Content="Repeat Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Height="26" Width="102" />
<PasswordBox x:Name="addReapeatPw" Grid.Row="2" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" />
<Label Content="Email:" Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="41"/>
<TextBox x:Name="addEmail" Grid.Row="3" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1"/>
<Button Grid.Row=" 5" Grid.Column="1" Content="ADD" Height="36" HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Click="AddAccount"></Button>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<RadioButton x:Name="r1" Grid.Row="0" Width="70" Height="30">
<Image Source="Bilder/Facebook.png"></Image>
</RadioButton>
<RadioButton x:Name="r2" Grid.Row="1" Width="70" Height="30">
<Image Source="Bilder/Skype.png"></Image>
</RadioButton>
<RadioButton x:Name="r3" Grid.Row="2" Width="70" Height="30">
<Image Source="Bilder/Youtube.png"></Image>
</RadioButton>
<RadioButton x:Name="r4" Grid.Row="3" Width="70" Height="30">
<Image Source="Bilder/Twitter.png"></Image>
</RadioButton>
<RadioButton x:Name="r5" Grid.Row="4" Width="70" Height="30">
<Image Source="Bilder/Microsoft.png"></Image>
</RadioButton>
<RadioButton x:Name="r6" Grid.Row="5" Width="70" Height="30">
<Image Source="Bilder/reddit.png"></Image>
</RadioButton>
<RadioButton x:Name="r7" Grid.Row="6" Width="70" Height="30">
<Image Source="Bilder/Origin.png"></Image>
</RadioButton>
<RadioButton x:Name="r8" Grid.Row="8" Width="70" Height="30">
<Image Source="Bilder/Steam.png"></Image>
</RadioButton>
</Grid>
</Grid>
<Grid VerticalAlignment="Top" x:Name="AccountsList" Grid.Row="1" Grid.Column="0">
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="Blue" BorderThickness="1.5" HorizontalAlignment="Right" Opacity="0.2"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<Border BorderBrush="LightBlue" BorderThickness="1.5" VerticalAlignment="Bottom"/>
<Border BorderBrush="Blue" BorderThickness="1.5" VerticalAlignment="Bottom" Opacity="0.2"/>
<Button x:Name="delete" Content="Delete" HorizontalAlignment="Left" Width="80" Height="36" Margin="85,19,0,19"/>
<Button x:Name="change" Content="Change" HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Height="36"></Button>
</Grid>
</Grid>
My Main Windows is:
<Window x:Class="AccountManager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="750" MaxWidth="750" MinWidth="750" MinHeight="500" MaxHeight="500">
<Grid x:Name="Main">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="371"></ColumnDefinition>
<ColumnDefinition Width="371"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="190"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Accountmanager" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" FontSize="24" FontFamily="Snap ITC"/>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="1" x:Name="bilder">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Source="Bilder/Facebook.png" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center" Width="70"/>
<Image Grid.Row="0" Grid.Column="1" Source="Bilder/Skype.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Grid.Row="0" Grid.Column="2" Source="Bilder/Youtube.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Grid.Row="0" Grid.Column="3" Source="Bilder/Twitter.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image Grid.Row="1" Grid.Column="0" Source="Bilder/Microsoft.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image Grid.Row="1" Grid.Column="1" Source="Bilder/reddit.png" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
<Image Grid.Row="1" Grid.Column="2" Source="Bilder/Origin.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<Image Grid.Row="1" Grid.Column="3" Source="Bilder/Steam.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Benutzername:" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<TextBox x:Name="benutzername" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1"></TextBox>
<PasswordBox x:Name="pw" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Bottom"/>
<Label Grid.Row="0" Grid.Column="0" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Button Grid.Column="0" Grid.Row="1" Content="Add" Width="80" Height="40" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="47,0,23,0" Click="ClickAddAccount"/>
<Button Grid.Column="1" Grid.Row="1" Content="Login" Width="80" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,23,0" Click="Login" />
<Button Grid.Column="1" Grid.Row="1" Content="Forgot Password" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="40" Width="95" Click="ForgotPw" />
</Grid>
</Grid>
</Grid>
In your place, I would use an ItemsControl and create an object to bind the ItemsSource to. Create an ItemsControl like this:
<ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=Header}">//Instead of header, use your own sourceobject
<ItemsControl.ItemTemplate>
<DataTemplate>
//Insert your Itemtemplate here, you can bind to any object in the ItemsSource!
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
This prevents you from the hassle to create each and every control manually and you can leave the creation of the controls to the wpf!
I want to link an external .xaml file into a grid in my Universal Windows Platform App.
This is the folder structure:
I want to link ListView.xaml into a grid which is declared inside MainPage.xaml
Codes for both file :
MainPage.xaml:
<Page
x:Class="TodoGrocery.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TodoGrocery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="gridView" Grid.Row="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Height="40" Background="#3A5194">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="Back" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
<TextBlock x:Name="title" Grid.Column="1" HorizontalAlignment="Center" FontSize="20" VerticalAlignment="Center" Foreground="White" Text="Todo Grocery"></TextBlock>
<Button x:Name="moreButton" BorderThickness="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="More" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
</Grid>
<Grid Grid.Row="1">
<Page><!-- Link ListView.xaml Here--></Page>
</Grid>
</Grid>
</Page>
ListView.xaml
<Page
x:Class="TodoGrocery.ListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TodoGrocery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid x:Name="listHeader" Grid.Row="0" BorderBrush="#d0d0d0" BorderThickness="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" IsChecked="True"></CheckBox>
<TextBlock Grid.Column="1" Text="Name" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,9,0,9"></TextBlock>
</Grid>
<Button Grid.Column="1">
<SymbolIcon Symbol="Sort"/>
</Button>
<TextBlock Grid.Column="2" Text="Quantity" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"></TextBlock>
</Grid>
<Grid x:Name="ListPanel" Grid.Row="1"></Grid>
<Grid x:Name="ButtonPanel" Grid.Row="2" Background="#3A5194">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button x:Name="deleteAllButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="White" Background="Transparent">
<!--<SymbolIcon Symbol="Delete" Foreground="White"/>-->
<StackPanel Orientation="Horizontal" Height="30">
<SymbolIcon Symbol="Delete" Foreground="White"/>
<TextBlock VerticalAlignment="Center" Foreground="White" Margin="10,0,0,0">Delete All</TextBlock>
</StackPanel>
</Button>
<Button x:Name="addButton" Grid.Column="1" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="White" Background="Transparent">
<!--<SymbolIcon Symbol="Delete" Foreground="White"/>-->
<StackPanel Orientation="Horizontal" Height="30" Width="100">
<SymbolIcon Symbol="Add" Foreground="white"/>
<TextBlock VerticalAlignment="Top" Foreground="White" HorizontalAlignment="Right" Margin="15,5,0,0">Add</TextBlock>
</StackPanel>
</Button>
</Grid>
</Grid>
</Page>
So this is what I'm planning to do with my app :
I will be having different external pages like ListView.xaml and whenever user clicks a link or a tab, the part where the page is linked should be changed with the page that has been asked for.
Thanks. Any other ideas are also appreciated.
To include a Page inside of another, use the Frame object:
<Grid Grid.Row="1">
<Frame x:Name="MainFrame"></Frame>
</Grid>
Then, to load a page inside of the Frame, just call the Navigate method:
this.MainFrame.Navigate(typeof(TodoGrocery.ListView));
As Kory said, you can know how to do what you want in UWP by reading Navigation chapter in How-to guides for Windows 10 apps.
The key point here is using Frame and Frame.Navigate methods. The frame hosts the pages and keeps the navigation history.
You create as many different page types as needed to present the content in your app, and then navigate to those pages by calling the Navigate method and passing in the type of the page to navigate to. You can also pass in a parameter object to initialize the page to a particular state.
So you can change your MainPage.xaml like following to link ListView.xaml:
<Page x:Class="TodoGrocery.MainPage"
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:local="using:TodoGrocery"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="gridView" Grid.Row="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Height="40" Background="#3A5194">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="Back" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
<TextBlock x:Name="title" Grid.Column="1" HorizontalAlignment="Center" FontSize="20" VerticalAlignment="Center" Foreground="White" Text="Todo Grocery"></TextBlock>
<Button x:Name="moreButton" BorderThickness="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="More" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
</Grid>
<Grid Grid.Row="1">
<Frame x:Name="MyFrame">
<local:ListView />
</Frame>
</Grid>
</Grid>
</Page>
Or just add a Frame in Grid:
<Grid Grid.Row="1">
<Frame x:Name="MyFrame" />
</Grid>
And in code-behind, using
MyFrame.Navigate(typeof(TodoGrocery.ListView));