I am trying to design layout of my WPF windows to add some code list item and I need to use DatePicker, but calendar button is not visible in textbox.
this is my grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Code" Grid.Column="0" Grid.Row="0" />
<TextBox Text="{Binding Path=Code}" Grid.Column="1" Grid.Row="0" MinWidth="160" MaxLength="30" MaxWidth="160" />
<Label Content="Description" Grid.Column="0" Grid.Row="1" />
<TextBox Text="{Binding Path=Description}" Grid.Column="1" Grid.Row="1" MinWidth="160" MaxLength="120" MaxWidth="160" />
<Label Content="Valid from" Grid.Column="2" Grid.Row="0" />
<DatePicker Name="dpValidFrom" VerticalAlignment="Top" Grid.Column="3" Grid.Row="0" />
<Label Content="Valid to" Grid.Column="2" Grid.Row="1" />
<DatePicker Name="dpValidTo" VerticalAlignment="Top" Grid.Column="3" Grid.Row="1" />
</Grid>
In design mode a see this:
but in app i see this:
have someone idea why?
Thanks for advice
I didn't have any problems using Windows 10 VS 2015. Though, based on your screen shot, it looks like there is some type of default Margin or Padding. Use this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="DatePicker">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
</Grid.Resources>
<Label Content="Code" Grid.Column="0" Grid.Row="0" />
<TextBox Text="{Binding Path=Code}" Grid.Column="1" Grid.Row="0" MinWidth="160" MaxLength="30" MaxWidth="160" />
<Label Content="Description" Grid.Column="0" Grid.Row="1" />
<TextBox Text="{Binding Path=Description}" Grid.Column="1" Grid.Row="1" MinWidth="160" MaxLength="120" MaxWidth="160" />
<Label Content="Valid from" Grid.Column="2" Grid.Row="0" />
<DatePicker Name="dpValidFrom" Grid.Column="3" Grid.Row="0" />
<Label Content="Valid to" Grid.Column="2" Grid.Row="1" />
<DatePicker Name="dpValidTo" Grid.Column="3" Grid.Row="1" />
</Grid>
Related
Here I have the XAML as follows.
<StackPanel>
<Label Content="a label here" Height="30" Background="LightBlue"/>
<Grid Background="LightCoral">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Content="first col"/>
<ComboBox Grid.Column="1" x:Name="cbox"/>
<Button Content="showerror" Grid.Column="2" HorizontalAlignment="Center"/>
</Grid>
</StackPanel>
Now I want to add a control, the label "error!" above the Combobox "cbox".
Rather than using Popup, is there any way to achieve it?
I think this is what you searching for:
<Grid>
<StackPanel>
<Label Content="a label here" Height="30" Background="LightBlue"/>
<Grid Background="LightCoral">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Grid.Row="0" Content="Error"/>
<Label Grid.Column="0" Grid.Row="1" Content="first col"/>
<ComboBox Grid.Column="1" Grid.Row="1"/>
<Button Content="showerror" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>
</Grid>
</StackPanel>
</Grid>
Screenshot
We can use Canvas.
<Canvas>
<TextBlock Background="WhiteSmoke" Foreground="Red" Text="error" Canvas.Left="110" Canvas.Top="20"/>
<Canvas.Style>
<Style TargetType="{x:Type Canvas}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsShown}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Canvas.Style>
</Canvas>
In my WPF application I'd like to reuse grid template few times.
I defined a data template for grid (named GrdTemplate) and I would like to use this template in several places of my XAML definition.
How one can use grid template?
Here is my XAML code:
<Grid Height="{Binding Converter={StaticResource PercentageConverter}, ElementName=listboxItems, Path=ActualHeight, ConverterParameter=0.48}"
MaxWidth="{Binding Converter={StaticResource PercentageConverter}, ElementName=listboxItems, Path=ActualWidth, ConverterParameter=0.1}">
<Grid.Resources>
<Style TargetType="TextBlock" >
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Margin" Value="2,2" />
</Style>
<DataTemplate x:Key="GrdTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=Tr}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Path=Hr}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=TypeK}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="2">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
Text="{Binding Path=Tk}" />
<TextBlock Grid.Row="0" Grid.Column="1"
Text="{Binding Path=Lft}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="3">
<Grid.RowDefinitions >
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Path=Crd}" />
</Grid>
</Grid>
</DataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="1"
Background="#FF576577"
BorderBrush="{DynamicResource GrayBrush7}" BorderThickness="2">
<Viewbox Stretch="Uniform" >
!!! Here I want to use my template with Object1 as Datasource !!!
</Viewbox>
</Border>
<Border Grid.Column="0" Grid.Row="1"
Background="#FF576577"
BorderBrush="{DynamicResource GrayBrush7}" BorderThickness="2">
<Viewbox Stretch="Uniform" >
!!! Here I want to use my template with Object2 as Datasource !!!
</Viewbox>
</Border>
</Grid>
What you should use here is not a DataTemplate but a UserControl. DataTemplates are typically used for controls that have a collection of child controls that you want to take the same appearance.
Then use your custom UserControl like this:
<Viewbox Stretch="Uniform">
<!--Here I want to use my template with Object2 as Datasource-->
<views:MyGrdUserControl DataContext="{Binding Object2}"/>
</Viewbox>
If you do want to use your DataTemplate though you could use a ContentPresenter and set the ContentTemplate to be your GrdTemplate resource
<Viewbox Stretch="Uniform">
<!--Here I want to use my template with Object2 as Datasource-->
<ContentPresenter Content="{Binding Object2}"
ContentTemplate="{StaticResource GrdTemplate}"/>
</Viewbox>
I want to set 2 colors to my grid rows, the even ones will have one color and the others will have another.
I dont know ho to even start of doing it.
<ListBox
ItemsSource="{Binding}" x:Name="station_list"
HorizontalAlignment="Left" Height="378" Margin="10,31,0,0"
VerticalAlignment="Top" Width="570" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="Stations_Template">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name: " />
<TextBlock Grid.Column="1" Text="{Binding Path=sname}" />
<TextBlock Grid.Column="2" Text="Last Name: " />
<TextBlock Grid.Column="3" Text="{Binding Path=mahoz}" />
<CheckBox Grid.Column="4" Content="Is Active?"
IsEnabled="False"
IsChecked="{Binding Path=isactive}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use Rectangles to fill the rows first, then add data to them.
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="AliceBlue" />
<TextBlock Grid.Row="0" Text="Row 1" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="1" Fill="AntiqueWhite" />
<TextBlock Grid.Row="1" Text="Row 2" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="2" Fill="AliceBlue" />
<TextBlock Grid.Row="2" Text="Row 3" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="3" Fill="AntiqueWhite" />
<TextBlock Grid.Row="3" Text="Row 4" HorizontalAlignment="Center"/>
</Grid>
Edit:
If you're loading an unknown amount of items, then i think you need something like an itemscontrol to load them in. You can then use the alternationcount and triggers to handle the alternating color.
<ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="FooBar" Margin="0,0,0,10">
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Blue" TargetName="FooBar"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Red" TargetName="FooBar"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Window x:Class="WpfApplication3.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.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Cyan" />
<Border Grid.Row="2" Grid.Column="1" Background="Red" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="2" Background="Orange" />
<Border Grid.Row="0" Grid.Column="1" Background="Green" />
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
![enter image description here][1]
[1]: http://i.stack.imgur.com/LX9X8.png
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:
I have a databound list box and a text block in my application
Initially the listbox will be populated with some values (More than 10 values). i tried to scroll the list. But I couldn't. When I Click on the list and drag the mouse up, the list goes further down. The effect is more or like pulling down the list.
The xaml code is as follows. please help.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ScrollViewer Grid.Row="1">
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Thank you.
Your ScrollViewer is currently wrapped around only the ListBox. Bearing in mind the ListBox has its own ScrollViewer this will result in unpredictable behaviour.
I would wrap your Grid with a ScrollViewer and disable the ListBox one so that you can scroll your TextBlock and ListBox smoothly.
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>
I achieved what i wanted. I didn't even need to include the scroll viewer. I just needed to change the row definition of the grid (row of the list box) from 'auto' to '*'. That worked as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>