WPF button size and font responsiveness

WPF button size and font responsiveness - c#

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?

Related

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>

WPF fixed rows are resizing

I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?

I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

Print a usercontrol to the center of an A4 page

I have a user control which I need to print.
The form is just a basic filled out form. I have the controls all placed in a stackpanel which is named and the button for printing is outside the stackpanel, so the button is not printed with.
<UserControl x:Class="*****.PrintInitiateRequestFormView"
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:WpfToolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
mc:Ignorable="d"
Style="{StaticResource TransitionAnimation}">
<ScrollViewer>
<Border Style="{StaticResource PanelWindowBackground}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel x:Name="PrntFrm"
Grid.Row="0">
<Border Grid.Row="1"
Grid.Column="1"
Margin="3,3,3,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Style="{StaticResource PanelWindowBackground}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="/Lamacs_8;component/Resources/Images/NMBM_Logo.jpg"
Stretch="Fill"
Grid.ColumnSpan="2"
Margin="0,0,74,0"
Width="265">
</Image>
<Label Grid.Row="1"
Grid.ColumnSpan="4"
HorizontalAlignment="Center"
Content="WORK REQUEST"
FontSize="20" />
<Label Grid.Row="2"
Grid.ColumnSpan="2"
Content="Call Centre"
FontSize="20">
</Label>
<Label Grid.Row="2"
Grid.Column="2"
FontSize="20"
Content="Reference Number:" />
<Label Grid.Row="2"
Grid.Column="3"
FontSize="16"
Content="{Binding RefNo}" />
<Label Grid.Row="3"
Grid.Column="2"
FontSize="16"
Content="Date & Time Logged:" />
<Label Grid.Column="3"
Grid.Row="3"
FontSize="16"
Content="{Binding CaptureDate}" />
<Label Grid.Row="4"
Grid.Column="0"
Content="Building:"
FontSize="16" />
<Label Grid.Row="4"
Grid.Column="1"
Content="{Binding LandObjectBuilding}"
FontSize="16" />
<Label Grid.Row="5"
Grid.Column="0"
Content="Address:"
FontSize="16" />
<Label Grid.Column="1"
Grid.Row="5"
FontSize="16"
Grid.ColumnSpan="2"
Content="{Binding LandObjectAddress}" />
<Label Grid.Row="6"
Grid.Column="0"
Content="Caller:"
FontSize="16" />
<Label Grid.Row="6"
Grid.Column="1"
Content="{Binding CallerName}"
FontSize="16" />
<Label Grid.Row="6"
Grid.Column="2"
Content="Telephone:"
FontSize="16" />
<Label Grid.Row="6"
Grid.Column="3"
Content="{Binding CallerTel}"
FontSize="16" />
<Label Grid.Row="7"
Grid.Column="0"
Content="Problem Description:"
FontSize="16" />
<TextBox Grid.Row="7"
Grid.Column="1"
Grid.ColumnSpan="3"
Height="50"
TextWrapping="Wrap"
Text="{Binding ProblemDesc}"
FontSize="16"
Background="Transparent"
BorderBrush="Transparent" />
<Label Grid.Row="8"
Grid.Column="2"
Content="Person Responsible:"
FontSize="16" />
<Label Grid.Row="8"
Grid.Column="3"
Content="{Binding Assistant}"
FontSize="16" />
<Label Grid.Row="8"
Grid.Column="0"
Content="Sector"
FontSize="16" />
<Label Grid.Row="8"
Grid.Column="1"
Content="{Binding Sector}"
FontSize="16" />
<Label Grid.Row="9"
Grid.Column="0"
Content="Component"
FontSize="16" />
<Label Grid.Row="9"
Grid.Column="1"
Content="{Binding Component}"
FontSize="16" />
<Label Grid.Row="9"
Grid.Column="2"
Content="Element"
FontSize="16" />
<Label Grid.Row="9"
Grid.Column="3"
Content="{Binding Element}"
FontSize="16" />
<Separator Grid.Row="11"
Grid.ColumnSpan="4" />
<Label Grid.Row="12"
Grid.Column="0"
Content="Official:"
FontSize="20" />
<Label Grid.Row="13"
Grid.Column="0"
Content="Scope Of Work:"
FontSize="16" />
<TextBox Grid.Row="13"
Grid.Column="1"
Grid.ColumnSpan="3"
FontSize="16"
TextWrapping="Wrap"
Text="{Binding ScopeOfWork}"
Background="Transparent"
BorderBrush="Transparent" />
<Label Grid.Row="14"
Grid.Column="0"
Content="Cost Estimate:"
FontSize="16" />
<Label Grid.Row="14"
Grid.Column="1"
FontSize="16"
Content="{Binding CostEstimate}" />
<Label Grid.Row="14"
Grid.Column="2"
Content="Name:"
FontSize="16" />
<Label Grid.Row="14"
Grid.Column="3"
FontSize="16"
Content="{Binding ReportName}" />
<Label FontSize="16"
Grid.Row="15"
Grid.Column="0"
Content="Date:" />
<Label Grid.Row="15"
Grid.Column="1"
Content="{Binding FormDate}"
FontSize="16" />
<Label Grid.Row="16"
Grid.Column="0"
Grid.ColumnSpan="4"
Content="(Obtain Quotes if required)"
FontSize="16"
HorizontalAlignment="Center" />
<Separator Grid.Row="17"
Grid.ColumnSpan="4" />
<Label FontSize="20"
Content="Admin"
Grid.Column="0"
Grid.Row="18" />
<Label FontSize="16"
Content="Funds Available:"
Grid.Column="0"
Grid.Row="19" />
<Label FontSize="16"
Content="Yes"
Grid.Column="1"
Grid.Row="19" />
<Label FontSize="16"
Content="No"
Grid.Column="1"
Grid.Row="19"
Margin="50,0,0,0" />
<Label Grid.Column="2"
Grid.Row="19"
Content="Vote/ISO Number:"
FontSize="16" />
<Label Grid.Row="19"
Grid.Column="3"
FontSize="16"
Content="{Binding VISONum}" />
<Separator Grid.ColumnSpan="4"
Grid.Row="20" />
<Label Grid.Row="21"
Grid.Column="0"
Content="Official:"
FontSize="20" />
<Label Grid.Row="22"
Grid.Column="0"
Content="Contractor:"
FontSize="16" />
<Label Grid.Row="22"
Grid.Column="1"
Grid.ColumnSpan="2"
FontSize="16"
Content="{Binding Contractor}" />
<Label Grid.Row="23"
Grid.Column="0"
Content="Order No:"
FontSize="16" />
<Label Grid.Row="23"
Grid.Column="1"
FontSize="16"
Content="{Binding OrderNo}" />
<Label Grid.Row="23"
Grid.Column="2"
Content="Date Issued:"
FontSize="16" />
<Label Grid.Row="23"
Grid.Column="3"
Content="{Binding DateIssued}"
FontSize="16" />
<Label Grid.Column="0"
Grid.Row="24"
FontSize="16"
Content="Cost of Works:" />
<Label Grid.Row="24"
Grid.Column="1"
FontSize="16"
Content="{Binding CostWorks}" />
<Label Content="Variance:"
FontSize="16"
Grid.Row="24"
Grid.Column="2" />
<Label Grid.Row="24"
Grid.Column="3"
FontSize="16"
Content="{Binding Variance}" />
<Label Grid.Column="0"
Grid.Row="25"
FontSize="16"
Content="Reason:" />
<Label Grid.Row="25"
Grid.Column="1"
Grid.ColumnSpan="3"
FontSize="16"
Content="{Binding Reason}" />
<Separator Grid.ColumnSpan="4"
Grid.Row="26" />
<Label Grid.Row="27"
Grid.Column="0"
Grid.ColumnSpan="3"
Content="I hereby declare that the cost of the works is fair and reasonable."
FontSize="16" />
<Label Grid.Row="28"
Grid.Column="0"
Content="Name:"
FontSize="16" />
<Label Grid.Row="28"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalContentAlignment="Bottom"
FontSize="16"
Height="40"
Content="......................................................................................................................" />
<Label Grid.Row="29"
Grid.Column="0"
Content="Date:"
FontSize="16" />
<Label Grid.Row="29"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalContentAlignment="Bottom"
FontSize="16"
Height="40"
Content="......................................................................................................................" />
<Label Grid.Row="30"
Grid.Column="0"
Content="Signature:"
FontSize="16" />
<Label Grid.Row="30"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalContentAlignment="Bottom"
FontSize="16"
Height="40"
Content="......................................................................................................................" />
</Grid>
</Border>
</StackPanel>
<StackPanel Grid.Row="1"
Orientation="Horizontal">
<Button Width="150"
Height="25"
Margin="4,0,0,5"
HorizontalAlignment="Left"
Template="{StaticResource PrintButtonTemplate}"
Click="Button_Click" />
<Button Width="150"
Height="25"
Margin="4,0,0,5"
HorizontalAlignment="Left"
Template="{StaticResource CloseButtonTemplate}"
x:Name="CloseButton"
Click="CloseButton_Click" />
</StackPanel>
</Grid>
</Border>
</ScrollViewer>
You can mind all the MVVM loading, that is done sepratly.
Anyway, using code behind, I basically add this to my button click:
PrintDialog prnt = new PrintDialog();
prnt.PrintVisual(PrntFrm, "Initiate Work Request");
This prints out my form (stackpanel), but it is not exactly centered on the page. It sits at the top left, and some of the text is cut off on the left side.
Using the PrintDialog methods, how does one set the size of the page to be printed, or just center the contents of the printable form? And also, how can I set the page orientation from PrintDialog?
Do I have to set the PrintableAreaHeight/Width, and how do I do so?

I got it.
PrintDialog prnt = new PrintDialog();
if (prnt.ShowDialog() == true)
{
Size pageSize = new Size(prnt.PrintableAreaWidth - 30, prnt.PrintableAreaHeight - 30);
PrntFrm.Measure(pageSize);
PrntFrm.Arrange(new Rect(15, 15, pageSize.Width, pageSize.Height));
prnt.PrintVisual(PrntFrm, "Work Request");
}
is for a potrait screen. sizes may change depending on the amount needed to print
and
PrintDialog prnt = new PrintDialog();
if (prnt.ShowDialog() == true)
{
prnt.PrintTicket.PageOrientation = System.Printing.PageOrientation.Landscape;
Size pageSize = new Size(prnt.PrintableAreaWidth + 30, prnt.PrintableAreaHeight + 300);
PrntFrm.Measure(pageSize);
PrntFrm.Arrange(new Rect(15, 15, pageSize.Height, pageSize.Width));
prnt.PrintVisual(PrntFrm, "Job Card");
}
is for landscape. again, size changes when needed

Why does my wpf-grid ignore Grid.Row?

I have the following code:
<Popup Name="enterNamePopup" Width="250" Height="200" AllowsTransparency="True" Placement="Center" IsOpen="true">
<Grid Background="Aquamarine">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="7"/>
<RowDefinition Height="20" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock Name="PleaseEnterName" Foreground="Black" Grid.Row="1" Text="Save as..." Grid.ColumnSpan="2" />
<TextBox Name="ProjectNameTextBox" Visibility="Visible" Grid.Row="2" Grid.ColumnSpan="2" />
<Button Name="SaveProjectButton" Content="Save Project" Grid.Row="3" Grid.Column="1"/>
<Button Name="CancelButton" Content="Cancel" Grid.Row="3" Grid.Column="2" />
</Grid>
</Popup>
Can anyone tell me why it looks like this
When i want to have something like this

You only have three RowDefinitions. They will be numbered 0, 1 and 2. Any row number higher than 2 will go into row 2.

WPF button arrangement

I am new to WPF, and I am trying to arrange a bunch of buttons:
I have 5 Marllet buttons: up, down, left, right, reset.
Arrange up, down, left and right at top, bottom, left and right respectively
And I want the reset button to take the center position surrounded by other 4 buttons.
Here is my current WPF code, but it lines up the reset button next to other 4, and the other 4 just lined up from top to bottom
<StackPanel Orientation="Horizontal">
<StackPanel>
<Button Content="Reset" Width="75" Height="30" Click="btnResetCrop3D_Click"/>
</StackPanel>
<StackPanel>
<Button FontFamily="Marlett" FontSize="20" Content="3" Width="20" Height="30"/>
<Button FontFamily="Marlett" FontSize="20" Content="4" Width="20" Height="30"/>
<Button FontFamily="Marlett" FontSize="20" Content="5" Width="20" Height="30"/>
<Button FontFamily="Marlett" FontSize="20" Content="6" Width="20" Height="30"/>
</StackPanel>
</StackPanel>
I am sorry I don't have enough credits to post an image. So if you have any confusion regarding my description, please let me know.

As #JeffRSon said use Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Grid.Column="0" Content="Left" />
<Button Grid.Row="0" Grid.Column="1" Content="Top" />
<Button Grid.Row="1" Grid.Column="2" Content="Right" />
<Button Grid.Row="2" Grid.Column="1" Content="Bottom" />
<Button Grid.Row="1" Grid.Column="1" Content="Center" />
</Grid>

Same thing done with a DockPanel
<DockPanel Height="300" Width="300">
<Button Content="Top" DockPanel.Dock="Top" Height="100" Width="100"/>
<Button Content="Bottom" DockPanel.Dock="Bottom" Height="100" Width="100"/>
<Button Content="Left" Height="100" Width="100"/>
<Button Content="Right" DockPanel.Dock="Right" Height="100" Width="100"/>
<Button Content="Last Child" Height="100" Width="100"/>
</DockPanel>
Personal choice, though :)

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

WPF button size and font responsiveness - c#

Related

Why does grid control cause binding to fail?

WPF fixed rows are resizing

Print a usercontrol to the center of an A4 page

Why does my wpf-grid ignore Grid.Row?

WPF button arrangement

Categories

Resources