Styling for Grid inside Another Grid - c#

I have a GridView(B) inside a GridView(A).
The style for GridView-A is different from style for GridView-B, but the issue arises when my GridView-B inherits all the style from GridView-A.
I don't want that to happen.
Is their any way, I can achieve this in xaml only ?


Just Follow the follwoing steps and let me know if you have any problem with this. Out of these you meight be aware already. May be you miss something.
1) Add ResourceDictionary as style sheet.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:XYZApplication">
<!-- Style 1-->
<Style x:Key="GridStyle1" TargetType="{x:Type Grid}">
<Setter Property="Background" Value="BlanchedAlmond"></Setter>
<Setter Property="Margin" Value="1,1,1,1"></Setter>
</Style>
<!-- Style 2-->
<Style x:Key="GridStyle2" TargetType="{x:Type Grid}">
<Setter Property="Background" Value="Aqua"></Setter>
<Setter Property="Margin" Value="5,5,5,5"></Setter>
</Style>
</ResourceDictionary>
2) Add resource file into your user control/window as follows...
<UserControl x:Class="XYZApplication.Views.Payment"
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:XYZApplication.Views"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Style/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
</UserControl>
3) Use those specific styles to designated grid inside the usercontrol/window
<Grid Style="{StaticResource GridStyle1}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1" Style="{StaticResource GridStyle2}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0">Bank Name</Label>
<Label Grid.Column="1" Grid.Row="0">Branch</Label>
<Label Grid.Column="2" Grid.Row="0">Account holder</Label>
<Label Grid.Column="3" Grid.Row="0">Account Number</Label>
<Label Grid.Column="4" Grid.Row="0">Balance</Label>
<Label Grid.Column="0" Grid.Row="1">Bank of ...</Label>
<Label Grid.Column="1" Grid.Row="1">...Branch</Label>
<Label Grid.Column="2" Grid.Row="1">My Name</Label>
<Label Grid.Column="3" Grid.Row="1">Account Number 123</Label>
<Label Grid.Column="4" Grid.Row="1">1 billion</Label>
</Grid>
</Grid>
You can add these both styles in code behind also.
Hope it helps!!!


You should explicitly define your style for both the gridviews. In WPF the child control inherits the properties of parent control, may be you have this issue. You might have defined style for gridviewA and not for gridviewB or you are using the same style for all gridviews. If you can share the code, i can tell you exactly what is the problem.

Related

How to make Responsive Grid using Avalonia framework

I want to make responsive desktop application which can run on different screen size as well as different platform.
I have used Grid.Extra.Avalonia library but it is only working for border.
I want to make grid Which have 2X2 column and row within that column and row we can place other control which would be responsive based on scree size.
Below is my code.
<Window
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ge="clr-namespace:GridExtra.Avalonia;assembly=GridExtra.Avalonia"
x:Class="ResponsiveGridSample.MainWindow"
Title="ResponsiveGrid Example" Height="350" Width="525">
<Grid>
<Grid.Styles>
<Style Selector="Grid">
<Setter Property="ge:ResponsiveGrid.XS" Value="12" />
<Setter Property="ge:ResponsiveGrid.SM" Value="6" />
<Setter Property="ge:ResponsiveGrid.MD" Value="2" />
</Style>
</Grid.Styles>
<ge:ResponsiveGrid>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!--<Label Grid.Column="0" Grid.Row="0">Vehilce Class</Label>-->
<ComboBox Grid.Column="1" Grid.Row="0" Width="250">
<ComboBoxItem>Car</ComboBoxItem>
<ComboBoxItem>Jeep</ComboBoxItem>
<ComboBoxItem>Van</ComboBoxItem>
</ComboBox>
</Grid>
</ge:ResponsiveGrid>
</Grid>
</Window>```
Where can we add class selector for grid to make responsive.

Misaligned button after compilation

I was creating a simple interface for my app. All went well when I prepared the GUI design, I'm using WPF and its XAML implementations. Problem came up after everything compiled very well and the app's running. There's this one button that goes misaligned when the app's running. I looked for the problem and found nothing. Any idea on how to fix this?
Expected result is on the left, the real result is on floating window. The XAML code of the misaligned button is below the floating window.

<Window x:Class="WPFAlignment.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="LoadFingerPrint"/>
<Button Grid.Column="1" Content="Load File"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="File Path:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="1"
Text="Key Size:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="2"
Text="Initial Vector:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<DockPanel LastChildFill="True" Grid.Column="1" Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
<Grid Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Content="128bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="1"
Content="192bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="2"
Content="256bit"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</Grid>
<DockPanel LastChildFill="True"
Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Encrypt"/>
<Button Grid.Column="1"
Content="Decrypt"/>
<Button Grid.Column="2"
Content="Abort"/>
</Grid>
</Grid>
</Grid>
Can you try this and see the alignment? You have all those margins set by hand there.. i think that's the issue.
Basically, for positioning use containers : Grid, DockPanel, StackPanel and so on and to be relative inside them, use Alignments as in the example, VerticalAlignment.
Also, in order to set some common value for many Controls use Styles, like i did with the Margin of the Button.

Wrap Panel Not Wrapping when contained in other controls

I'm trying to implement an expander in WPF which in side there are some nested controls. One of these is a Wrap Panel which i'd like to wrap as the user changes the window size.
This works if i take the Grid Control parent of the WrapPanel out and put it in its own App but not in this format. As i'm not using minimum width for this Grid it suprises me why it doesnt wrap. Any ideas? Thanks
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" FontFamily="Calibri" FontSize="8">
<StackPanel Orientation="Vertical">
<Expander Margin="3" Padding="3">
<Expander.Header>
<StackPanel Orientation="Horizontal" MinWidth="150" Width="Auto" MinHeight="25">
<Label MinWidth="50">Label 1</Label>
<CheckBox VerticalAlignment="Center"></CheckBox>
<Border></Border>
<Label>Label 2</Label>
</StackPanel>
</Expander.Header>
<Expander.Content>
<StackPanel Orientation="Horizontal" >
<Label MinWidth="150">Add Image</Label>
<Grid Name="Grid1" ShowGridLines="True" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Name="Title1" MinHeight="25"></RowDefinition>
<RowDefinition Name="Number1" MinHeight="25"></RowDefinition>
<RowDefinition Name="PlaneA" MinHeight="25"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="Plane1" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="PlaneCheckBox" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="Border1" MinWidth="25" Width="Auto"></ColumnDefinition>
<ColumnDefinition Name="List1" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<WrapPanel Grid.Row="2" Grid.Column="3" Orientation="Horizontal" VerticalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
<ColumnDefinition MinWidth="25"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" VerticalAlignment="Center"></CheckBox>
<Label Grid.Column="1">No. 1</Label>
</Grid>
</WrapPanel>
</Grid>
</StackPanel>
</Expander.Content>
</Expander>
</StackPanel>

StackPanel has an infinite size in the orientation direction. so when using a WrapPanel inside a StackPanel you must limit the size of the StackPanel in that direction. Grid has a finite size on the other hand, so you can see your content wrapping.

Strange behavior of control position in wpf

It's a strange behaviour about the WPF Control positioning. I had a below controls and aligned well during design time. However runtime gave the misaligned positioning in the corner of button
<Window x:Class="StackOverflow.LookAndWork"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Tables" Height="388" Width="314" ResizeMode="NoResize" >
<Grid>
<TextBox Margin="12,12,12,41"></TextBox>
<Button Content="OK" Height="23" Margin="205,314,12,12" Name="button3" Width="75" IsCancel="True" IsEnabled="False" />
</Grid>
</Window>
DesignTime Snap
Runtime Snap
Suppose If i removed the ResizeMode="NoResize" from the Window. I can able to see the correct positioning at runtime. What is the problem with ResizeMode="NoResize" ?
Anyhelp would be greatly appreciated !!!

Instead of adding the margin in control level, why don't you add the minimum margin in grid level?
Example:
<Grid Margin="12,12,12,12">
This way you will get a 12 pixel margin border.
On the button, don't do hardcoded left margin. Instead, you can use HorizontalAlignment="Right" to do the job.
On a side note, I less prefer to add controls in grid without specifying the Grid.RowDefinitions, Grid.ColumnDefinitions, Grid.Row and Grid.Column. It is a poweful tool for Grid.

For better looking, don't use Margin or Size. Use Grid definition to split your application.
With the following xaml, your application will always have a good looking :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="23" />
</Grid.RowDefinitions>
<TextBox />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="OK" Name="button3" IsCancel="True" IsEnabled="False" />
</Grid>
</Grid>
Width and Height can be define in a Dictionary. In this case, in RowDefinition and ColumnDefinition properties, use Auto instead of values.
Edit :
Use a Dictionnary like
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}">
<Setter Property="Width" Value="75"/>
<Setter Property="Height" Value="23"/>
</Style>
</ResourceDictionary>
then
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="OK" Name="button3" IsCancel="True" IsEnabled="False" />
</Grid>
</Grid>

I can't see the same issue in VisualStudio 2012 designer: http://screencast.com/t/TGVgUyfR
Both design-time and runtime are look the same. So there should be a bug in a prior version of the designer.
Nevertheless I'd suggest you to move your button into separate grid row or use another layout controls to organise your views.

To extend Xaruth's answer, I'd not fix the height for the button row, but instead have it use the default height. The same goes for the width, which I'd have the button define.
Also note that I give the button a margin. The added bonus of not fixing the grid column/row sizes it that now the row height also takes the margin into account:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="OK" Name="button3" IsCancel="True" IsEnabled="False" Width="75" Margin="0,8,0,0" />
</Grid>
</Grid>

How to customize DataGrid header?

How can I customize DataGrid Header?
This picture shows what I want to do...
I try this, but it not working...
<DataGridTemplateColumn.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Text="Název modelu"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Text="Cena bez DPH"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Cena s DPH"></TextBlock>
</Grid>
</DataGridTemplateColumn.Header>
Can you help me, how can I do it?

Try to set the HorizontalAlignment to Center on your TextBlock
<TextBlock HorizontalAlignment="Center"
Grid.Column="1" Grid.Row="1" Text="Cena s DPH"></TextBlock>
You can start here to read more about the WPF Layout system
You also need to set the HorizontalContentAlignment to for the DataGridColumnHeader
Add this to the DataGridTemplateColumn:
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</DataGridTemplateColumn.HeaderStyle>

Try Width="*" on the ColumnDefinitions

Categories

Resources