Different Behaviour of Grid.RowDefinition at runtime and at design time - c#

suppose I have a grid like below:
<Grid>
<Grid.Resources>
<converters:MultiplyHeightByThreeConverter x:Key="multiplyHeightByThreeConverter" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=rowPinCode, Path=ActualHeight, Converter={StaticResource multiplyHeightByThreeConverter}}"/>
<RowDefinition x:Name="rowPinCode" Height="Auto" />
.....
.....
</Grid.RowDefinitions>
.....
.....
</Grid>
Here is my Converter Code :
public class MultiplyHeightByThreeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (((double)value) * 3);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
At Design time I get the expected Output :
But at Runtime I don't get that row :
I have also found the reason for that :
I kept a breakpoint on converter's Convert Method's opening bracket and found that value of value parameter is 0.00
How do I solve the problem?
I also tried to use Height instead of ActualHeight but then I get error because it cannot convert Auto to Double
Update :
<Page x:Class="WPF_Client.Pages.Masters.Single.Ledger"
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:Self="clr-namespace:WPF_Client"
xmlns:helpers="clr-namespace:WPF_Client.HelperClasses"
xmlns:model="clr-namespace:Data;assembly=Data"
mc:Ignorable="d"
d:DesignHeight="760" d:DesignWidth="1366"
Title="Ledger" DataContext="{StaticResource mainWindowViewModel}">
<Page.Resources>
<CollectionViewSource x:Key="GroupNamesWithCorrespondingEffectsCollection" Source="{Binding GroupNamesWithCorrespondingEffects}" />
<CollectionViewSource x:Key="CreditDebitsCollection" Source="{Binding CreditDebits}" />
</Page.Resources>
<Grid DataContext="{Binding CurrentLedger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="0.15*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Name" />
<DockPanel Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding Name}" />
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="1" Text="Group" />
<DockPanel Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="3" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<ComboBox ItemsSource="{DynamicResource Items}"
SelectedValue="{Binding DataContext.SelectedGroupIDinLedger, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
SelectedValuePath="GroupID" Grid.IsSharedSizeScope="True" TextSearch.TextPath="GroupName">
<ComboBox.Resources>
<CompositeCollection x:Key="Items">
<ComboBoxItem IsEnabled="False" Background="#FF2A2A2A" Foreground="White">
<Grid TextElement.FontWeight="Bold" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="Group Name" />
<TextBlock Grid.Column="2" Text="Effect" />
</Grid.Children>
</Grid>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource GroupNamesWithCorrespondingEffectsCollection}}" />
</CompositeCollection>
<DataTemplate DataType="{x:Type helpers:GroupNameWithCorrespondingEffect}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="{Binding GroupName}" />
<TextBlock Grid.Column="2" Text="{Binding CorrespondingEffect}" />
</Grid.Children>
</Grid>
</DataTemplate>
</ComboBox.Resources>
</ComboBox>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" Text="Opening Balance" />
<DockPanel Grid.Row="5" Grid.Column="3" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding OpeningBalance}"/>
</DockPanel>
<ComboBox Grid.Row="5" Grid.Column="4" Margin="10,0,0,0" ItemsSource="{DynamicResource Items}"
SelectedValue="{Binding DataContext.SelectedCreditDebitIDinLedger, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
SelectedValuePath="CreditDebitID" Grid.IsSharedSizeScope="True" TextSearch.TextPath="Symbol">
<ComboBox.Resources>
<CompositeCollection x:Key="Items">
<ComboBoxItem IsEnabled="False" Background="#FF2A2A2A" Foreground="White">
<Grid TextElement.FontWeight="Bold" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="Value" />
<TextBlock Grid.Column="2" Text="Symbol" />
</Grid.Children>
</Grid>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource CreditDebitsCollection}}" />
</CompositeCollection>
<DataTemplate DataType="{x:Type model:Master_CreditDebits}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="{Binding Value}" />
<TextBlock Grid.Column="2" Text="{Binding Symbol}" />
</Grid.Children>
</Grid>
</DataTemplate>
</ComboBox.Resources>
</ComboBox>
<GroupBox Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="4" Header="Credit Limits"
Visibility="{Binding DataContext.CreditLimitsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Credit Days" />
<DockPanel Grid.Row="1" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding CreditDays}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Credit Limit" />
<DockPanel Grid.Row="3" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding CreditLimit}"/>
</DockPanel>
</Grid>
</GroupBox>
<GroupBox Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="4" Header="Bank Details"
Visibility="{Binding DataContext.BankDetailsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="A/c No." />
<DockPanel Grid.Row="1" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding BankAccountNo}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Branch" />
<DockPanel Grid.Row="3" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding BranchName}"/>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="0" Text="BSR Code" />
<DockPanel Grid.Row="5" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding BSRCode}"/>
</DockPanel>
</Grid>
</GroupBox>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.3*" />
</Grid.ColumnDefinitions>
<!--Here is the problem part-->
<GroupBox Grid.Row="1" Grid.Column="1" Header="General Details"
Visibility="{Binding DataContext.GeneralDetailsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="{Binding ElementName=rowPinCode, Path=ActualHeight, Converter={StaticResource multiplyHeightByThreeConverter}}" />
<RowDefinition Height="10" />
<RowDefinition x:Name="rowPinCode" Height="Auto"/>
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Address" />
<DockPanel Grid.Row="1" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding Address}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Pincode" />
<DockPanel Grid.Row="3" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding PINCode}"/>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="0" Text="City" />
<DockPanel Grid.Row="5" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<ComboBox />
</DockPanel>
<TextBlock Grid.Row="7" Grid.Column="0" Text="State" />
<DockPanel Grid.Row="7" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<ComboBox />
</DockPanel>
</Grid>
</GroupBox>
<GroupBox Grid.Row="3" Grid.Column="1" Header="Contact Details"
Visibility="{Binding DataContext.ContactDetailsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Contact Person" />
<DockPanel Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding ContactPerson}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Phone No." />
<DockPanel Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding DataContext.TelephoneNo1, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"/>
<TextBox Grid.Column="1" Text="{Binding DataContext.TelephoneNo2, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}" Margin="5,0,0,0"/>
</Grid>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="0" Text="Email Address" />
<DockPanel Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding EmailAddress}"/>
</DockPanel>
<TextBlock Grid.Row="7" Grid.Column="0" Text="Website" />
<DockPanel Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding Website}"/>
</DockPanel>
</Grid>
</GroupBox>
<GroupBox Grid.Row="5" Grid.Column="1" Header="Tax Information"
Visibility="{Binding DataContext.TaxInformationVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="PAN / IT No." />
<DockPanel Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding PANCardOrITNo}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Sales Tax No." />
<DockPanel Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding SalesTaxNo}"/>
</DockPanel>
</Grid>
</GroupBox>
</Grid>
</Grid>
</Page>
Update 2:
After your suggestions :
At Design Time:
At Runtime :


You don't need converter. In case you want first row to be thrice of second row, you can give relative width using 3*.
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition x:Name="rowPinCode" Width="Auto" Height="*" />
.....
</Grid.RowDefinitions>
UPDATE
Using row definitions like mentioned above works completely fine at my end. Definition's declaration:
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="3*" />
<RowDefinition Height="10" />
<RowDefinition x:Name="rowPinCode" Height="*"/>
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
Snapshot:

Related

How to set usercontrol elements from viewmodel in .net WPF App?

I am working on a .NET WPF project using Visual Studio 2022. I have pages that includes usercontrol and I need to set textblock element's text property from mainviewmodel class. Any idea how to do it?
Wpf page I need to set textblock values:
<UserControl x:Class="MyWpfApp.Pages.LogPage"
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" Focusable="False">
<Grid>
<Grid.RowDefinitions >
<RowDefinition Height="24"/>
<RowDefinition Height="32"/>
<RowDefinition Height="41"/>
<RowDefinition Height="55"/>
<RowDefinition Height="12"/>
<RowDefinition Height="56"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Margin="32,0,0,0" Text="{StaticResource TrayLogsPageHeader}" Style="{StaticResource HeaderTextBlockStyle}" />
<Button Grid.Row="3" Style="{StaticResource TrayLogButtonStyle}" HorizontalContentAlignment="Left" Command="{Binding OnOpenLogFolderButtonClickCommand }">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12" />
<ColumnDefinition Width="18" />
<ColumnDefinition Width="14" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" Width="18" FontSize="16" LineHeight="22" FontWeight="Heavy" FontFamily="{StaticResource faRegularFontFamily}" Foreground="{StaticResource Blue-700Brush}" ></TextBlock>
<TextBlock Grid.Column="3" Style="{StaticResource InfoTextBlockStyle}" Foreground="{StaticResource Blue-700Brush}" Text="{StaticResource LogFolderButtonText}" />
<TextBlock Grid.Column="5" Style="{StaticResource InfoTextBlockStyle}" Foreground="{StaticResource Black-200Brush}" Text="{StaticResource TrayLogFolderPath}" />
</Grid>
</Button>
<Button Grid.Row="5" Style="{StaticResource TrayLogButtonStyle}" HorizontalContentAlignment="Left" Command="{Binding OnOpenCurrentLogFileButtonClickCommand }">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12" />
<ColumnDefinition Width="18" />
<ColumnDefinition Width="14" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="198" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" Width="18" FontSize="16" LineHeight="22" FontWeight="Heavy" FontFamily="{StaticResource faRegularFontFamily}" Foreground="{StaticResource Blue-700Brush}" ></TextBlock>
<TextBlock Grid.Column="3" Style="{StaticResource InfoTextBlockStyle}" Foreground="{StaticResource Blue-700Brush}" Text="{StaticResource ActiveLogFileButtonText}" />
<TextBlock Grid.Column="5" Style="{StaticResource InfoTextBlockStyle}" Foreground="{StaticResource Black-200Brush}" Text="{StaticResource TrayLogFolderPath}" />
</Grid>
</Button>
</Grid>
</UserControl>

WPF button size and font responsiveness

I attempted to make a simple calculator app to start learning about WPF.
The issue that I am currently facing is that when I resize (Maximize, Minimize) the window the layout of my calculator app will change in a bad way. I cannot tell if it is the font of each button that is causing this issue or the overall layout of my XAML.
Here is the XAML:
<Window x:Class="Calculator.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:Calculator"
mc:Ignorable="d"
Title="Calculator" Height="600" Width="500"
WindowStartupLocation="CenterScreen">
<!-- Container -->
<Grid Margin="10"
Style="{StaticResource Root}"
>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="30*"
/>
<ColumnDefinition
Width="*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="16*"
/>
<RowDefinition
Height="32*"
/>
<RowDefinition
Height="*"
/>
</Grid.RowDefinitions>
<!-- Display -->
<Border
Grid.Column="1"
Grid.Row="1"
Style="{StaticResource Display}"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="2*"
/>
</Grid.RowDefinitions>
<Label
x:Name="Label_DisplayNumber"
Content="0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Grid.Column="0"
Grid.Row="1"
FontSize="75"
Foreground="#183B5D"
Margin="0, 0, 20, 0"
/>
<Label
x:Name="Label_DisplayOperation"
Content=""
HorizontalAlignment="left"
VerticalAlignment="Center"
Grid.Column="0"
Grid.Row="0"
FontSize="40"
Foreground="#183B5D"
Margin="20, 0, 0, 0"
/>
</Grid>
</Border>
<!-- Controls -->
<Grid
Grid.Column="1"
Grid.Row="2"
Style="{StaticResource Interface}"
>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="*"
/>
<ColumnDefinition
Width="*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
<RowDefinition
Height="*"
/>
</Grid.RowDefinitions>
<!-- Buttons_Numbers -->
<Button
Content="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="4"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="1"
Grid.Column="0"
Grid.Row="3"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="2"
Grid.Column="1"
Grid.Row="3"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="3"
Grid.Column="2"
Grid.Row="3"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="4"
Grid.Column="0"
Grid.Row="2"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="5"
Grid.Column="1"
Grid.Row="2"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="6"
Grid.Column="2"
Grid.Row="2"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="7"
Grid.Column="0"
Grid.Row="1"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="8"
Grid.Column="1"
Grid.Row="1"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<Button
Content="9"
Grid.Column="2"
Grid.Row="1"
Style="{StaticResource Button_Number}"
Click="Button_Click_Number"
/>
<!-- Buttons_Operators -->
<Button
Content="AC"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
Style="{StaticResource Button_Operator}"
Click="Button_Click_AllClear"
/>
<Button
Content="+/-"
Grid.Column="2"
Grid.Row="0"
Style="{StaticResource Button_Operator}"
Click="Button_Click_SignConversion"
/>
<Button
Content="/"
Grid.Column="3"
Grid.Row="0"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="*"
Grid.Column="3"
Grid.Row="1"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="-"
FontStretch="UltraExpanded"
Grid.Column="3"
Grid.Row="2"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="+"
Grid.Column="3"
Grid.Row="3"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Operator"
/>
<Button
Content="="
Grid.Column="3"
Grid.Row="4"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Equal"
/>
<Button
Content="."
Grid.Column="2"
Grid.Row="4"
Style="{StaticResource Button_Operator}"
Click="Button_Click_Period"
/>
</Grid>
</Grid>
</Window>
Here is how the calculator app looks in normal size:
Here is how the calculator app looks when the window is maximized:
I am not exactly sure what is causing it to look so bad when the window is maximized. It seems to me that my buttons are stretching way too much which makes them look wide and the font inside very small. So here are my questions:
How can I improve the layout to make it better?
Does the "Button" element contain a property that allows the font inside it to stretch so that it won't look so small on maximized windows?

Why does grid control cause binding to fail?

I'm having a really strange problem that I can't seem to figure out. If I try to bind like the first code below the binding inside the grid does not work.
<Controls:Flyout IsOpen="{Binding Ui.EditGameFlyOut, Mode=TwoWay}" Header="{Binding SelectedGame.Id, StringFormat='Edit Game [{0}]'}" Position="Right" Theme="Dark" Width="300">
<ScrollViewer>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="200" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Width="100" Content="Save" Cursor="Hand" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10" />
<Label Grid.Row="1">Title</Label>
<TextBox Grid.Row="2" Text="{Binding SelectedGame.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Margin="0,0,0,10" />
<Label Grid.Row="3">Release date</Label>
<DatePicker Grid.Row="4" Margin="0,0,0,10" SelectedDate="{Binding DatePickerDate}" />
<Label Grid.Row="5">Overview</Label>
<TextBox Grid.Row="6" Text="" Grid.Column="1" Margin="0,0,0,10" />
</Grid>
</ScrollViewer>
</Controls:Flyout>
But if I remove the grid control like the second code snippet it works no problem. Why could this occur?
<Controls:Flyout IsOpen="{Binding Ui.EditGameFlyOut, Mode=TwoWay}" Header="{Binding SelectedGame.Id, StringFormat='Edit Game [{0}]'}" Position="Right" Theme="Dark" Width="300">
<ScrollViewer>
<TextBox Grid.Row="2" Text="{Binding SelectedGame.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Margin="0,0,0,10" />
</ScrollViewer>
</Controls:Flyout>
I find this really strange…

I managed to fix it after a lot of research.
What I had to do was put a DataContext on the Grid such as the code below.
<Controls:Flyout IsOpen="{Binding Ui.EditGameFlyOut, Mode=TwoWay}" Header="{Binding SelectedGame.Id, StringFormat='Edit Game [{0}]'}" Position="Right" Theme="Dark" Width="300">
<ScrollViewer>
<Grid Margin="10" DataContext="{Binding SelectedGame}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="200" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Width="100" Content="Save" Cursor="Hand" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,10" />
<Label Grid.Row="1">Title</Label>
<TextBox Grid.Row="2" Text="{Binding Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,0,10" />
<Label Grid.Row="3">Release date</Label>
<DatePicker Grid.Row="4" Margin="0,0,0,10" SelectedDate="{Binding DatePickerDate}" />
<Label Grid.Row="5">Overview</Label>
<TextBox Grid.Row="6" Text="" Margin="0,0,0,10" />
</Grid>
</ScrollViewer>
</Controls:Flyout>

How to put two different textboxes into same level?

Right xaml code looks this way:
mc:Ignorable="d" d:DesignWidth="363" Height="628">
<Grid Style="{StaticResource ContentRoot}">
<ScrollViewer Margin="0,-105,-9,0">
<StackPanel MinWidth="200" HorizontalAlignment="Left" Width="474" Height="459">
</InlineUIContainer>
<Run Language="ru-ru"/>
<LineBreak/>
<Run Language="ru-ru" Text="Num1"/>
<LineBreak/>
<InlineUIContainer>
<TextBox d:DesignUseLayoutRounding="True"
Width="160"
UseLayoutRounding="True"
Text="Enter num"
TextWrapping="Wrap"
x:Name="TxtBlock_numRequest"
InputMethod.IsInputMethodEnabled="False"
Height="23"
AutoWordSelection="True"/>
</InlineUIContainer>
<LineBreak/>
<Run Language="ru-ru"/>
<LineBreak/>
<Run Language="ru-ru" Text="ID"/>
<Run Text=" "/>
<LineBreak/>
<InlineUIContainer>
<TextBox Width="160"
Text="Enter num"
TextWrapping="Wrap"
x:Name="TxtBlock_IDWork"
Height="23"/>
As you can there are two textboxes, which located one under other one, and I need to put them into same level, I tried it to via constructor, it simply don't do it in my particular case. To clearify I have added pictures.
And don't be afraid foreign inscriptiones, its doesn't matter.
I just don't know how to fix this, and I think it' related with StackPanel. Any ideas ?
UPD: All xaml code here http://snipt.org/Btff4/Default#expand
UPD: May be it possible to put one more stack panel rigt to existing one?

You are probably looking for Orientation attribute:
<StackPanel MinWidth="200" HorizontalAlignment="Left" Width="474" Height="459" Orientation="Horizontal">
Update
Adding a very basic example to illustrate how StackPanel works:
<Window x:Class="WpfTestBench.Stackpanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" SizeToContent="WidthAndHeight">
<StackPanel Orientation="Horizontal" Margin="10">
<TextBox Text="First textbox" Height="20" Margin="5, 0" />
<TextBox Text="Second textbox" Height="20" />
</StackPanel>
</Window>
Execution result:
Update
Adding XAML which allows to achieve desired layout:
<Window x:Class="WpfTestBench.Stackpanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Sample layout" SizeToContent="Height" Width="400">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="3" Grid.Row="0" Content="Задайте параметры заявок" FontWeight="Bold" FontSize="16" />
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="номер заявки" />
<TextBox Grid.Row="1" Text="Введите число" />
<TextBlock Grid.Row="3" Text="приоритет заявки" />
<ComboBox Grid.Row="4" SelectedIndex="0">
<ComboBoxItem Content="Высокий" />
<ComboBoxItem Content="Средний" />
<ComboBoxItem Content="Низкий" />
</ComboBox>
</Grid>
<Grid Grid.Column="2" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="идентификатор вида работы" />
<TextBox Grid.Row="1" Text="Введите число" />
<TextBlock Grid.Row="3" Text="номер траектории" />
<TextBox Grid.Row="4" Text="Введите число" />
</Grid>
</Grid>
</Window>
Execution result:

You can use a StackPanel with Orientation="Horizontal", as a container. Something like:
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>Label</TextBlock>
<TextBox Width="150"/>
</StackPanel>
<StackPanel>
<TextBlock>Label 2</TextBlock>
<TextBox Width="150"/>
</StackPanel>
</StackPanel>

I prefer Grid defintion than StakPanel. You can easily design your application with that method, just cut each area in many smaller area. Use Auto and * to define proportion.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Label" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" />
<Label Content="Label" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" />
<TextBox Text="Text here !" Grid.Row="1" Grid.Column="0" />
<TextBox Text="Text here !" Grid.Row="1" Grid.Column="1" />
</Grid>
<Grid Grid.Row="1">
<Label Content="I need this kind of location" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>

Grid should do what you need:
<Window x:Class="WpfApplication1.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.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="lblTextBlock1" Text="Text Block" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Text="TextBlock1" Grid.Row="1" Margin="5,0,0,0" MaxHeight="20" MinWidth="100" MaxLength="4" MaxWidth="40"></TextBox>
<TextBlock Grid.Column="1" Name="lblTextBlock2" Text="Text Block" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Grid.Column="1" Text="TextBlock2" Grid.Row="1" Margin="5,0,0,0" MaxHeight="20" MinWidth="100" MaxLength="4" MaxWidth="40"></TextBox>
</Grid>

How to stretch StackPanel to FullScreen

I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?

Categories