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?
I'm having a hard time making my WPF form scrollable. The form is quite long, and i want the user to be able to scroll further down. If i adjust the height of the form, as the scrollbar becomes active, it moves everything around, and makes my content smaller. How do i avoid this? I've added 2 Pictures (Before & After) and my XAML code.
<Window x:Class="RegisterForm.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="1000" Width="700" MinHeight="1000" MinWidth="700">
<ScrollViewer
VerticalScrollBarVisibility="Visible"
CanContentScroll="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Content="Full Name"
FontSize="14"
FontWeight="Bold"
Grid.Row="1"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Gender"
FontSize="14"
FontWeight="Bold"
Grid.Row="2"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Date of Birth"
FontSize="14"
FontWeight="Bold"
Grid.Row="3"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Address"
FontSize="14"
FontWeight="Bold"
Grid.Row="4"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Phone Number"
FontSize="14"
FontWeight="Bold"
Grid.Row="7"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Phone Number Family"
FontSize="14"
FontWeight="Bold"
Grid.Row="8"
Grid.ColumnSpan="3"
Margin="40,0,0,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="E-mail"
FontSize="14"
FontWeight="Bold"
Grid.Row="9"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Do you speak english?"
FontSize="14"
FontWeight="Bold"
Grid.Row="10"
Grid.ColumnSpan="3"
Margin="40,0,0,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Education"
FontSize="14"
FontWeight="Bold"
Grid.Row="11"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Job Type/Profession"
FontSize="14"
FontWeight="Bold"
Grid.Row="12"
Grid.ColumnSpan="3"
Margin="40,0,0,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Experience"
FontSize="14"
FontWeight="Bold"
Grid.Row="13"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<Label
Content="Drivers License"
FontSize="14"
FontWeight="Bold"
Grid.Row="14"
Grid.ColumnSpan="3"
Margin="40,0,40,0"
HorizontalContentAlignment="Left">
</Label>
<TextBox
x:Name="txtFirstName"
FontSize="14"
Grid.Row="1"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="First Name"
FontSize="12"
Grid.Row="1"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<TextBox
x:Name="txtLastName"
FontSize="14"
Grid.Row="1"
Grid.Column="5"
Grid.ColumnSpan="3"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="Last Name"
FontSize="12"
Grid.Row="1"
Grid.Column="5"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<ComboBox
x:Name="CBGender"
FontSize="12"
Grid.Row="2"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,0,0,30"
IsEditable="True"
IsReadOnly="True"
Text="Please Select"
FontStyle="Normal">
<ListBoxItem Content="Male" FontStyle="Normal"/>
<ListBoxItem Content="Female" FontStyle="Normal"/>
</ComboBox>
<ComboBox
x:Name="CBDOBDay"
FontSize="12"
Grid.Row="3"
Grid.Column="3"
Grid.ColumnSpan="1"
Margin="10,0,0,30"
IsEditable="True"
IsReadOnly="True"
Text="DD"
FontStyle="Normal">
</ComboBox>
<ComboBox
x:Name="CBDOBMonth"
FontSize="12"
Grid.Row="3"
Grid.Column="4"
Grid.ColumnSpan="1"
Margin="10,0,0,30"
IsEditable="True"
IsReadOnly="True"
Text="MM"
FontStyle="Normal">
</ComboBox>
<ComboBox
x:Name="CBDOBYear"
FontSize="12"
Grid.Row="3"
Grid.Column="5"
Grid.ColumnSpan="1"
Margin="10,0,0,30"
IsEditable="True"
IsReadOnly="True"
Text="YY"
FontStyle="Normal">
</ComboBox>
<TextBox
x:Name="txtStreetAddress"
FontSize="14"
Grid.Row="4"
Grid.Column="3"
Grid.ColumnSpan="3"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="Street Address"
FontSize="12"
Grid.Row="4"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<TextBox
x:Name="txtCity"
FontSize="14"
Grid.Row="5"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="City"
FontSize="12"
Grid.Row="5"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<TextBox
x:Name="txtStateProvince"
FontSize="14"
Grid.Row="5"
Grid.Column="5"
Grid.ColumnSpan="3"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="State / province"
FontSize="12"
Grid.Row="5"
Grid.Column="5"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<TextBox
x:Name="txtPostalZipCode"
FontSize="14"
Grid.Row="6"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="Postal / Zip code"
FontSize="12"
Grid.Row="6"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<ComboBox
x:Name="CBCountry"
FontSize="12"
Grid.Row="6"
Grid.Column="5"
Grid.ColumnSpan="3"
Margin="10,0,0,30"
IsEditable="True"
IsReadOnly="True"
Text="Please Select"
FontStyle="Normal" SelectionChanged="CBCountry_SelectionChanged">
</ComboBox>
<Label
Content="Country"
FontSize="12"
Grid.Row="6"
Grid.Column="5"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<TextBox
x:Name="txtPhone1AreaCode"
FontSize="14"
Grid.Row="7"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<TextBox
x:Name="txtPhone1"
FontSize="14"
Grid.Row="7"
Grid.Column="5"
Grid.ColumnSpan="3"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="Area Code (ex. +45)"
FontSize="12"
Grid.Row="7"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<Label
Content="Phone Number"
FontSize="12"
Grid.Row="7"
Grid.Column="5"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<TextBox
x:Name="txtPhone2AreaCode"
FontSize="14"
Grid.Row="8"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<TextBox
x:Name="txtPhone2"
FontSize="14"
Grid.Row="8"
Grid.Column="5"
Grid.ColumnSpan="3"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="Area Code (ex. +45)"
FontSize="12"
Grid.Row="8"
Grid.Column="3"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<Label
Content="Phone Number"
FontSize="12"
Grid.Row="8"
Grid.Column="5"
Grid.ColumnSpan="2"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
<TextBox
x:Name="txtEmail"
FontSize="14"
Grid.Row="9"
Grid.Column="3"
Grid.ColumnSpan="4"
Margin="10,0,0,30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
</TextBox>
<Label
Content="Ex. myname#example.com"
FontSize="12"
Grid.Row="9"
Grid.Column="3"
Grid.ColumnSpan="3"
Margin="10,25,0,0"
FontStyle="Italic"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left">
</Label>
</Grid>
</ScrollViewer>
//Thanks, Rasmus
The problem with ScrollViewer is that it is virtually infinite. So, the content inside it can't calculate relative sizes such as *. In your case, i think if you add a height to your grid, something like <Grid Height="1000"> it will work fine.
You have to specify the Heigh or MinHeigh of at least one part: The Editors (Labels / Textboxes / Comboboxes) or the GridRows or the whole Grid. Currrently the Grid is filled within the Window and the Columns also fill all together the whole Grid. Normally you would Set Grids' Rows Height to
<RowDefinition Height="auto" />
instead of
<RowDefinition Height="*" />
and give the editors some kind of MinHeight or Padding.
So there are many Solutions. It just depends on how you want to have the Labels/Editors Height. (Dynamic or fixed)
EDIT/ADD:
And just as a SideNote, if you define the same style foreach of those Row-/ and ColumnDefinitions, you maybe should assign a Style in the Grid for those.
It makes things easier to Change at once ;D
<Grid>
<Grid.Resources>
<Style TargetType="RowDefinition">
<Setter Property="Height" Value="auto" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- ... -->
</Grid>
I used to draw something like tabcontrol in WizardPage control of extended WPF toolkit.
Relevant xaml code:
<xctk:WizardPage x:Name="Page1" PageType="Blank" Width="540"
BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<TextBox Width="135" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
<TextBox Width="135" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Width="135" Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Width="135" Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
</DockPanel>
<Grid Grid.Row="1">
<GroupBox Header="Group 1" FontSize="16" Height="80" Margin="0,0,0,90" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="270"/>
<ColumnDefinition Width="270"/>
</Grid.ColumnDefinitions>
<RadioButton x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Left" Margin="30,30,0,0"/>
<RadioButton x:Name="RadioButUpdate" Content="Update" Grid.Column="1" FontSize="13.333" Focusable="False" HorizontalAlignment="Left" Margin="30,30,0,0"/>
</Grid>
</GroupBox>
</Grid>
But text boxes inside grid aren't at the same width though I set each of them to same width which is the total WizardPage width/4 (since I have four text boxes).
Any solution please?
Thanks!
To equally divide in 4 columns , you should use a grid, instead of a DockPanel. Although it is unnecessary to precide the Width. Just indicate that you have 4 columns :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Column="1" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Column="2" Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Column="3" Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
</Grid>
<Grid Grid.Row="1">
<GroupBox Header="Group 1" FontSize="16" Height="80" Margin="0,0,0,90" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="270"/>
<ColumnDefinition Width="270"/>
</Grid.ColumnDefinitions>
<RadioButton x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Left" Margin="30,30,0,0"/>
<RadioButton x:Name="RadioButUpdate" Content="Update" Grid.Column="1" FontSize="13.333" Focusable="False" HorizontalAlignment="Left" Margin="30,30,0,0"/>
</Grid>
</GroupBox>
</Grid>
</Grid>
you can also simplify you xaml by using only 1 grid. Grid.ColumnSpan is handy is such a case :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="80"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="2" Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="3" Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<GroupBox Header="Group 1" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" FontSize="16" Margin="0,0,0,90" />
<RadioButton Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Center" Margin="30,30,0,0"/>
<RadioButton Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" x:Name="RadioButUpdate" Content="Update" FontSize="13.333" Focusable="False" HorizontalAlignment="Center" Margin="30,30,0,0"/>
</Grid>
WPF TextBox Control grows when a long text has been typed in.
This question has been already raised in Stackoverflow
and I refereed few answers also, but still I didn't find the proper answer which is working.
Here same problem has been mentioned but no working solution for this kind of issue.
I have spend enough time to solve this, please help me to solve this issue.
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<DockPanel LastChildFill="False" Grid.IsSharedSizeScope="True">
<GroupBox DockPanel.Dock="Top" DataContext="{Binding Data, ValidatesOnNotifyDataErrors=False}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<TextBlock shell:Localization.VbeiTag="vbeiGeneralInformation" Text="General Information"/>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid DockPanel.Dock="Top" Margin="0,0,0,3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="GroupA" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="GroupB" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--Code Prefix Label -->
<Label Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Content="Code" ></Label>
<Label Grid.Row="0" Grid.Column="2" HorizontalAlignment="Left" Content="Name" ></Label>
<Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Content="Title" ></Label>
<Label Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Content="Long Reference" ></Label>
<Label Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" Content="Client Reference"></Label>
<Label Grid.Row="3" Grid.Column="2" HorizontalAlignment="Left" Content="Lead Sub-Business Unit" ></Label>
<!--Code Prefix Editor-->
<common:StudyCodeEditor Grid.Row="0" Grid.Column="1" DataContext="{Binding ValidatesOnNotifyDataErrors=False}"
SuggestedStudyCodePrefixRange="{ViewModelBinding SuggestedStudyCodePrefixRange}"/>
<!--Study Name-->
<TextBox Grid.Row="0" Grid.Column="3" Margin="3" VerticalAlignment="Top"
Text="{Binding StudyName, UpdateSourceTrigger=PropertyChanged}" />
<!--Study Title -->
<TextBox Grid.Row="1" Grid.Column="1" Margin="3" Grid.ColumnSpan="3" VerticalAlignment="Top"
Text="{Binding StudyOfficialTitle, UpdateSourceTrigger=PropertyChanged}" />
<!--Client Long Reference -->
<TextBox Grid.Row="2" Grid.Column="1" Margin="3" Grid.ColumnSpan="3" VerticalAlignment="Top"
Text="{Binding StudyClientLongReference, UpdateSourceTrigger=PropertyChanged}" />
<!--Client Study Reference-->
<TextBox Grid.Row="3" Grid.Column="1" Margin="3" VerticalAlignment="Top"
Text="{Binding ClientStudyReference, UpdateSourceTrigger=PropertyChanged}" />
<!-- Description -->
<TextBox Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="3"
Text="{Binding Description}" AcceptsReturn="True" DockPanel.Dock="Top"
TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Margin="3" Height="62"/>
</Grid>
</GroupBox>
</DockPanel>
</ScrollViewer>
MaxWidth should do the trick. If not, what went wrong in your case?
I have a WPF Application. I added a scrollviewer to a window. However I can see the scrollviewer during the design. When I debug the project then the scrollviewer does not seem...
There is the code
</local:WorkControl.DataContext>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<Grid Name="mainGrid" VerticalAlignment="Top">
<Grid.Background>
<ImageBrush Stretch="Fill" TileMode="FlipXY" Viewport="0,0,1479,437" ViewportUnits="Absolute" />
</Grid.Background>
<DockPanel HorizontalAlignment="Stretch" Margin="1,1,1,1" Name="dockPanel1" VerticalAlignment="Top" Width="Auto">
<Grid Name="grid1" Width="Auto" Margin="0" VerticalAlignment="Top" DockPanel.Dock="Top" OpacityMask="Black" ShowGridLines="False" OverridesDefaultStyle="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="310" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="123" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="3" BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Left" Margin="2" Name="borAdrTopR" VerticalAlignment="Top" CornerRadius="5"
AllowDrop="False">
<Canvas Width="834" Height="40" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Name="panelTop" ContextMenuOpening="panelTop_ContextMenuOpening">
<TextBlock Name="txAdrID" Canvas.Left="11" Canvas.Top="11" Height="20" Text="AdrID:" Width="44" Foreground="Silver" FontWeight="Bold" />
<TextBox Text="{Binding [AdrID]}" Height="20" HorizontalAlignment="Right" Margin="0,11,602,0" Name="tbAdrID" Width="86" VerticalAlignment="Top" FontWeight="Bold"
VerticalContentAlignment="Top" Foreground="Silver" Canvas.Left="54" Canvas.Top="-1" Padding="1" BorderThickness="0" IsReadOnly="True" Background="{x:Null}" />
<TextBlock Canvas.Left="488" Canvas.Top="11" Height="20" Text="Adresspool:" Width="70" TextAlignment="Right" />
<CheckBox Canvas.Left="570" Canvas.Top="11" Content="MSS" Height="16" Name="chkMSSPool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<CheckBox Canvas.Left="620" Canvas.Top="11" Content="GMM" Height="16" Name="chkGMMPool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<CheckBox Canvas.Left="675" Canvas.Top="11" Content="MZ" Height="16" Name="chkMZPool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" IsEnabled="False" />
<CheckBox Canvas.Left="728" Canvas.Top="11" Content="Sage" Height="16" Name="chkSagePool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<CheckBox Canvas.Left="780" Canvas.Top="11" Content="Web" Height="16" Name="chkMyMalikPool" IsEnabled="False" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<TextBox Background="{x:Null}" BorderThickness="0" Canvas.Left="367" Canvas.Top="9" FontWeight="Bold" Foreground="Red" Height="21" IsReadOnly="True" Name="tbSecInfo"
Padding="1" Text="" VerticalContentAlignment="Top" Width="101" />
<Image Canvas.Left="268" Canvas.Top="11" Height="16" Name="imgCRMstatus" Stretch="None" Width="96" MouseLeftButtonUp="imgCRMstatus_MouseClick"
MouseRightButtonUp="imgCRMstatus_MouseClick" />
<Label Canvas.Left="257" Canvas.Top="17" Height="11" Name="lbCRMStatus" Width="9" IsEnabled="False" />
<Image Canvas.Left="466" Canvas.Top="7" Height="24" Name="imgSec" Stretch="None" Width="24" MouseRightButtonUp="imgSec_MouseClick" MouseLeftButtonUp="imgSec_MouseClick"
Visibility="Hidden" />
</Canvas>
</Border>
<Border Grid.Row="1" BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Left" Name="borAddress" VerticalAlignment="Top" CornerRadius="5" Background="White"
AllowDrop="False">
<FlowDocumentScrollViewer HorizontalAlignment="Left" Name="fdocview" VerticalAlignment="Top" Height="Auto" VerticalScrollBarVisibility="Auto" Background="#FFFFFFF9"
Margin="2" HorizontalContentAlignment="Left" Padding="0" MinHeight="118">
<FlowDocument TextAlignment="Left" FontSize="12" PagePadding="5">
<FlowDocument.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="FontSize" Value="13" />
<Setter Property="Foreground" Value="DarkBlue" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="Margin" Value="0,0,0,0" />
</Style>
</FlowDocument.Resources>
<Paragraph>ViewControl...mmm</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
</Border>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Silver" BorderThickness="1" Padding="3" Name="borAdrInfoLeft" CornerRadius="6" AllowDrop="False">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="73" />
<ColumnDefinition />
<ColumnDefinition Width="35" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<local:ComboBoxCW Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" x:Name="cbAdrTypeID" CWListName="Adresstypen" Background="#FFC8D2E8"
SelectedID="{Binding Path=[AdrTypeID]}" SelectionChanged="cwAdrType_SelectionChanged" Margin="0,0,0,3" />
<local:ComboBoxCW Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" x:Name="cbGruppenID" SelectedID="{Binding [GruppenID]}" CWListName="Gruppen" Background="#FFC8D2E8"
CWListArt="withall" CWListFilter="M" Margin="0,0,0,3" />
<TextBlock Grid.Column="3" Grid.Row="0" Name="txtBedeutung" Text="$$" Width="22" TextAlignment="Center" VerticalAlignment="Center" />
<TextBox Grid.Column="1" Grid.Row="2" Name="tbKundenNr" Canvas.Left="83" Text="{Binding [KundenNr]}" BorderBrush="#96000000" MaxLength="30" Margin="0,0,0,3" />
<TextBox Grid.Column="3" Grid.Row="2" Name="tbCRA" Text="{Binding [CRA]}" BorderBrush="#96000000" IsReadOnly="True" Margin="0,0,0,3" />
<local:ComboBoxCW Grid.Column="1" Grid.Row="3" x:Name="cwSprachID" SelectedID="{Binding [SprachID],Mode=TwoWay}" CWListName="Sprachen" CWListArt="withempty"
Margin="0,0,0,3" />
<ComboBox Grid.Column="3" Grid.Row="3" Name="cbBedeutung" Text="{Binding Path=[Bedeutung]}">
<ComboBoxItem Content=" " />
<ComboBoxItem Content="A" />
<ComboBoxItem Content="B" />
<ComboBoxItem Content="C" />
</ComboBox>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Adressart" />
<TextBlock Grid.Column="0" Grid.Row="1" Text="Gruppe" />
<TextBlock Grid.Column="0" Grid.Row="2" Text="Kundennr." />
<TextBlock Grid.Column="2" Grid.Row="2" Text="CRA" TextAlignment="Right" />
<TextBlock Grid.Column="0" Grid.Row="3" Text="Sprache" />
<TextBlock Grid.Column="2" Grid.Row="3" Text="Bed." TextAlignment="Right" />
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="2" BorderBrush="Silver" BorderThickness="1" Padding="3" Name="borAdrInfoRight" CornerRadius="6" AllowDrop="False">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="73" />
<ColumnDefinition />
<ColumnDefinition Width="35" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<local:ComboBoxCW Grid.Row="0" Grid.Column="1" x:Name="cbAdrStatusID" SelectedID="{Binding [AdrStatusID]}" CWListName="Adressstati" Margin="0,0,0,3"
Background="#FFC8D2E8" />
<TextBox Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" Name="tbMZunitID"
Text="{Binding [MZunitID],Mode=OneWay,Converter={StaticResource codetextfromid}, ConverterParameter=MZunits}" Margin="0,0,0,3" BorderBrush="#96000000"
IsReadOnly="True" />
<local:ComboBoxCW Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" x:Name="cbBetreuerID" Text="" Background="#FFC8D2E8" CWListName="Mitarbeiter" Margin="0,0,0,3"
SelectedID="{Binding Path=[BetreuerID]}" CWListArt="withall" />
<ListBox Grid.Row="2" Grid.Column="1" Name="listBetreuers" BorderBrush="#96000000" SelectionChanged="listBetreuers_SelectionChanged" Grid.ColumnSpan="3"
Grid.RowSpan="2" Margin="0,0,0,3" />
<Popup Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" OpacityMask="#00000000" Name="popAdd" StaysOpen="False" PlacementTarget="{Binding ElementName=listBetreuers}"
Placement="Bottom" HorizontalOffset="-40" VerticalOffset="-20">
<ListBox Height="160" Width="270" HorizontalAlignment="Left" Name="listAdd" VerticalAlignment="Top" SelectionChanged="listAdd_SelectionChanged" />
</Popup>
<Button Grid.Row="3" Grid.Column="4" Content="-" Height="22" Width="22" Name="btnBetreuerDel" Click="btnBetreuerDel_Click" HorizontalAlignment="Right" />
<Button Grid.Row="2" Grid.Column="4" Content="+" Height="22" Width="22" Name="btnBetreuerAdd" Click="btnBetreuerAdd_Click" HorizontalAlignment="Right" />
<Button Grid.Row="1" Grid.Column="4" Content="H" Height="22" Width="22" Name="btnBetreuerHaupt" Click="btnBetreuerHaupt_Click" HorizontalAlignment="Right" />
<TextBlock Grid.Row="0" Grid.Column="0" Text="Status" />
<TextBlock Grid.Row="0" Grid.Column="2" Text="Unit" TextAlignment="Right" Margin="2" />
<TextBlock Name="lbHauptbetrP" Visibility="Visible" Grid.Row="1" Grid.Column="0" Text="Hauptbetr." />
<TextBlock Name="lbHauptbetrF" Visibility="Hidden" Grid.Row="1" Grid.Column="0" Text="Account-Mgr." />
<TextBlock Grid.Row="2" Grid.Column="0" Text="weitere Betreuer" TextWrapping="Wrap" />
</Grid>
</Border>
<!-- ====TAB Firma start -->
<TabControl Grid.Row="2" Grid.ColumnSpan="3" Name="tabReg" Margin="0" SelectionChanged="tabReg_SelectionChanged" VerticalAlignment="Stretch" Padding="2,2">
<TabItem Header="Firma" Name="regFirma" local:HelpProvider.HelpParameter="AddressControl;Firma">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<!-- ====Firmen-Felder linke Seite -->
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Silver" BorderThickness="1" Padding="3" Name="borFeed0" CornerRadius="6" AllowDrop="False">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="95" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="38" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Firma" />
<Button Name="btnLinkFirma" Height="23" Width="23" ToolTip="Mit Firma verknüpfen..." Click="btnLinkFirma_Click" Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,5,0">
<Button.Content>
<Image Source="Images/Verknuepfung_32.png" />
</Button.Content>
</Button>
<TextBox Name="tbFirma" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Margin="0,0,0,3" Text="{Binding Path=[Firma]}" BorderBrush="#96000000"
MouseDoubleClick="tbFirma_MouseDoubleClick" MaxLength="80" AcceptsReturn="True" />
<TextBox x:Name="tbFirmazusatz" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,0,3" Text="{Binding Path=[Firmazusatz]}" BorderBrush="#96000000"
MaxLength="50" />
There are more codes
Adding to Aghilas's answer
If you have set HorizontalScrollBarVisibility, VerticalScrollBarVisibility properties to 'Auto', try setting them to Visible.