Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Is it possible to have grid with 2 columns for example, and have different number of rows in each of it, like 4 in first, 3 in second.
I'd like something like on the picture
You can't do that with just one Grid, but using multiple Grid controls, the ColumnSpan and RowSpan properties, and some sort of a control, you can generate a 'grid' like that.
<Window x:Class="SOWPF.MainWindow"
...
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" Background="Orange"/>
<Border Grid.Column="0" Grid.Row="1" Margin="4" Background="Green"/>
<Border Grid.Column="0" Grid.Row="2" Margin="4" Background="Green"/>
<Border Grid.Column="0" Grid.Row="3" Margin="4" Background="Green"/>
<Border Grid.Column="0" Grid.Row="4" Margin="4" Background="Green"/>
<Border Grid.Column="1" Grid.Row="1" Grid.RowSpan="4" Margin="4" Background="Orchid">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Margin="4" Background="DeepSkyBlue"/>
<Border Grid.Row="1" Margin="4" Background="DeepSkyBlue"/>
<Border Grid.Row="2" Margin="4" Background="DeepSkyBlue"/>
</Grid>
</Border>
</Grid>
</Window>
The View:
Related
I'm migrating a WPF application to UWP and I'm having a design issue. How to make a ComboBox fill all the space of the grid line in which it is contained? In WPF I used the code below.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="SpkPgTxtLanguage" Width="auto" Height="auto" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0" FontSize="12" />
<ComboBox Name="cbxDefaultLanguage" Margin="3,3,3,3" Width="auto" Height="auto" Grid.Column="1" Grid.Row="0" >
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Flag}" Width="32" Height="32" />
<TextBlock Text="{Binding Name}" Margin="10, 0, 0, 0" FontSize="12"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
In UWP, you can set ComboBox.HorizontalAlignment to Stretch, which means that ComboBox can fill the remaining space horizontally.
<ComboBox Name="cbxDefaultLanguage" Margin="3,3,3,3" HorizontalAlignment="Stretch" Grid.Column="1" Grid.Row="0" >
...
</ComboBox>
Best regards.
I want to create a standard Name and Address form like with multiple textboxs on a line to save space.
Is it better to start with Grids or Stack Panels and nest them? Is it better to create a custom control that combines TextBox and TextBlock?
I'll post my solution below. I was just curious if there's a better way to do this and what the merits of each method might be.
<!-- Snipplet of UWP XAML -->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Width="400" Background="Aqua" Padding="10"
BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name"/>
<TextBlock Grid.Column="1" Text="Last Name"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
Text="John"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
Text="Smith"/>
</Grid>
<TextBlock>Address1</TextBlock>
<TextBox Background="White" Text="1 Center St"/>
<TextBlock>Address2:</TextBlock>
<TextBox Background="White"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="City"/>
<TextBlock Grid.Column="1" Text="State"/>
<TextBlock Grid.Column="2" Text="Zip"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
Text="Townville"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
Text="XX"/>
<TextBox Grid.Row="1" Grid.Column="2" Background="White"
Text="12345"/>
</Grid>
<TextBlock/>
<StackPanel
Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Ok" Margin="0,0,10,0"
Width="100" BorderThickness="1" BorderBrush="Black"/>
<Button Content="Cancel"
Width="100" BorderThickness="1" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
</Grid>
you can design your control as you want or you can make it separately on a UserControl but thing should be need to note here , you already put the text already on textbox instead of using placeholder text , so i change it in your code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Width="400" Background="Aqua" Padding="10"
BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name"/>
<TextBlock Grid.Column="1" Text="Last Name"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
PlaceholderText="John"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
PlaceholderText="Smith"/>
</Grid>
<TextBlock>Address1</TextBlock>
<TextBox Background="White" PlaceholderText="1 Center St"/>
<TextBlock>Address2:</TextBlock>
<TextBox Background="White"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="City"/>
<TextBlock Grid.Column="1" Text="State"/>
<TextBlock Grid.Column="2" Text="Zip"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
PlaceholderText="Townville"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
PlaceholderText="XX"/>
<TextBox Grid.Row="1" Grid.Column="2" Background="White"
PlaceholderText="12345"/>
</Grid>
<TextBlock/>
<StackPanel
Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Ok" Margin="0,0,10,0"
Width="100" BorderThickness="1" BorderBrush="Black"/>
<Button Content="Cancel"
Width="100" BorderThickness="1" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
</Grid>
and you can learn basics of uwp development from this link
In the interest of performance, having only one panel is better - see the UWP app developer docs on performance. Therefore, I would use a relative panel, ending up with something like this:
<RelativePanel>
<!-- Horizontal group -->
<TextBox x:Name="TxtBx1"/>
<TextBox x:Name="TxtBx2" RelativePanel.RightOf="TxtBx1"/>
<!-- Below the first group -->
<TextBox x:Name="TxtBx3" RelativePanel.Below="TxtBx1"/>
<!-- Another horizontal group -->
<TextBox x:Name="TxtBx4" RelativePanel.Below="TxtBx3"/>
<TextBox x:Name="TxtBx5" RelativePanel.RightOf="TxtBx4"/>
</RelativePanel>
But in all honesty, there is no 'correct' answer as such - it depends on what you rank more highly in your app, be it performance or code readability.
I have a simple layout that basically displays a list of items in ListView using an ItemsWrapGrid as the panel template. The problem I am having is that the first image in the ListView is always bigger than the rest, even with a fixed width / height set. I am completely stumped.
An image of the problem:
The ListView XAML is:
<ListView ItemsSource="{Binding Currencies}" ItemTemplate="{StaticResource PortfolioCurrencyTemplate}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" Width="Auto" Height="Auto"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
The data template:
<Page.Resources>
<DataTemplate x:Key="PortfolioCurrencyTemplate" x:DataType="viewModels:PortfolioViewModel">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="2"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="1" MaxWidth="100" MaxHeight="100" Source="https://www.cryptocompare.com/media/19633/btc.png"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Symbol}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding LastPrice}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Page.Resources>
Instead of using ListView and changing ItemsPanelTemplate to create a GridView Effect and tackle issues one by one, I would suggest you switch to AdaptiveGridView.
You can install Nuget Package for UWP Community Toolkit from Here
Add below namespace to your page
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
Now your ListView needs to be replaced like below.
<controls:AdaptiveGridView ItemsSource="{Binding Currencies}"
ItemTemplate="{StaticResource PortfolioCurrencyTemplate}"
DesiredWidth="250"/>
Output from Designer
Good Luck.
Still learning visual studio and it's elements :-)
My question is as follows...
How do i extract "for example" the [clientname] out of session object using a xaml resource designer?
The session it's self is "CurrentSession" realistically i would like this to be dynamic so that i could use my listview template on any listview. I have been following the courses Here and this has helped me immensely but i cannot seem to work out how to do this from a session object, any help would be greatly appreciated :-)
a part of my xaml designer for a listview....
<DataTemplate x:Key="templateListBoxItem">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
Margin="0,0,10,0">
<Image Source="{DynamicResource IMS}"
Stretch="Fill"
Height="20"
Width="20"/>
</Border>
<ItemsControl ItemsSource="{Binding CurrentSession[clientName]}">
<TextBlock Text="{Binding clientName}"
Grid.Row="0"
Grid.Column="1"
FontWeight="Bold"/>
</ItemsControl>
</Grid>
</DataTemplate>
First I want to let you know that I am not really into all of the XAML features. I am creating one of my first applications in the Windows 8 .Xaml area.
Right now I'm creating a legend in which all the points that can be found in the application are explained.
For this legend I am using the Grid defenitions to define the rows and columns that are being displayed.
My question is, does someone know how to outline the defined rows and columns in the grid?
(Some of the code I used to create the legend:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
<TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
<TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
<TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
<TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>
)
The easiest way is to set ShowGridLines property of your Grid to True
ShowGridLines="True"
There are other options, depending on how you want the outlines be displayed exactly. Some of those options are explained in this SO post.
UPDATE :
Since you develop on Win RT platform which doesn't have ShowGridLines property, you should make outlines on your own. The minimum effort I can think is to add Rectangle for each Row spanning through all columns, and add Rectangle for each column spanning through all rows. That way will need less Rectangles than if you create it for each cell as shown in above link. Check this other SO post for example. And example for your case :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
<TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
<TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
<TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
<TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>
<!-- Horizontal Lines -->
<Rectangle Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="1" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="3" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="4" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<!-- Vertical Lines -->
<Rectangle Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
<Rectangle Grid.Column="1" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
Just add ShowGridLines="True" to your grid
For example
<Grid Name="grdValues" Height="155" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
</Grid>
Update
<Border BorderThickness="1" Grid.Column="1" Grid.Row="0" Name="brdUsrName" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="60" Background="Black">
<TextBlock x:Name="lText1" Text="Definition 1" FontSize="33"/>
</Border>