I have two textboxes with constant height, I want to vertically stack the textboxes and a grid. I tried with stackpanel but then the grid doesn't stretch and it stays with same size all the time (smallest as possible).
<StackPanel Orientation="Vertical" MaxWidth="110">
<TextBox Background="White" Height="40" Text="some text1"/>
<TextBox Background="White" Height="40" Text="some text2"/>
<Grid x:Name="internalGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MaxWidth="110"/>
<ColumnDefinition Width="1*" MaxWidth="110"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" MaxHeight="300"/>
<RowDefinition Height="1*" MaxHeight="300"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0"/>
<Button Grid.Column="0" Grid.Row="1"/>
<Button Grid.Column="1" Grid.Row="0"/>
<Button Grid.Column="1" Grid.Row="1"/>
</Grid>
</StackPanel>
I also tried to use Grid instead of stackpanel but then when I make the app with full screen there is a margin between the textboxes and the internal grid
StackPanel doesn't behave like this. It occupies minimal required space. Use a Grid instead and define RowDefinitions. By default the space inside a Grid is equally distributed among the rows (Height is set to "*"), so you have to set the Height to "Auto" where you want the rows to occupy minimum space:
<Grid MaxWidth="110">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Background="White"
Height="40"
Text="some text1" />
<TextBox Grid.Row="1" Background="White"
Height="40"
Text="some text2" />
<Grid Grid.Row="2" x:Name="internalGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"
MaxWidth="110" />
<ColumnDefinition Width="1*"
MaxWidth="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"
MaxHeight="300" />
<RowDefinition Height="1*"
MaxHeight="300" />
</Grid.RowDefinitions>
<Button Grid.Column="0"
Grid.Row="0" />
<Button Grid.Column="0"
Grid.Row="1" />
<Button Grid.Column="1"
Grid.Row="0" />
<Button Grid.Column="1"
Grid.Row="1" />
</Grid>
</Grid>
Alternatively try a DockPanel:
<DockPanel MaxWidth="110" LastChildFill="True" >
<TextBox DockPanel.Dock="Top" Background="White"
Height="40"
Text="some text1" />
<TextBox DockPanel.Dock="Top" Background="White"
Height="40"
Text="some text2" />
<Grid DockPanel.Dock="Top" x:Name="internalGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"
MaxWidth="110" />
<ColumnDefinition Width="1*"
MaxWidth="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"
MaxHeight="300" />
<RowDefinition Height="1*"
MaxHeight="300" />
</Grid.RowDefinitions>
<Button Grid.Column="0"
Grid.Row="0" />
<Button Grid.Column="0"
Grid.Row="1" />
<Button Grid.Column="1"
Grid.Row="0" />
<Button Grid.Column="1"
Grid.Row="1" />
</Grid>
</DockPanel>
You can achieve this by using an IMultiValueConverter:
[ValueConversion(typeof(double), typeof(double))]
public class MyConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
var total = (double)values.FirstOrDefault();
var subtract = values.Cast<double>().Sum();
return total + total - subtract;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
You can introduce your converter in XAML in the resources section:
<Window.Resources>
<local:MyConverter x:Key="Converter"></local:MyConverter>
</Window.Resources>
And your XAML will be changed to:
<StackPanel Orientation="Vertical" MaxWidth="110" Background="Red">
<TextBox Name="Label1" Background="White" Height="40" Text="some text1"/>
<TextBox Name="Label2" Background="White" Height="40" Text="some text2"/>
<Grid x:Name="internalGrid" Background="Yellow" >
<Grid.Height>
<MultiBinding Converter="{StaticResource Converter}">
<Binding RelativeSource="{RelativeSource AncestorType=StackPanel}" Path="ActualHeight"/>
<Binding ElementName="Label1" Path="ActualHeight"/>
<Binding ElementName="Label2" Path="ActualHeight"/>
</MultiBinding>
</Grid.Height>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MaxWidth="110"/>
<ColumnDefinition Width="1*" MaxWidth="110"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" MaxHeight="300"/>
<RowDefinition Height="1*" MaxHeight="300"/>
</Grid.RowDefinitions>
</Grid>
</StackPanel>
Definitely, the backgrounds colors are just for more clarification and not necessary.
Related
I am using Syncfusion's SfDataGrid instead of standard one, but this question is more about XAML, not the control itself, I think.
So, I have a window with DataGrid. If there is for example 60 records, then the window gets really tall. I want the window not to change its size at all. And really don't know why it's happening.
This is my XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Margin="10,0,10,0" Grid.Row="0" DataContext="{Binding Info}">
<TextBlock Text="Amount:"/>
<sf:CurrencyTextBox Value="{Binding Amount}" Margin="0,0,0,10"/>
<!-- some other controls -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource LeftLabel}"
Text="Count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="0" Margin="0,0,0,5"
Value="{Binding Count}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Style="{StaticResource LeftLabel}"
Text="Year count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="1"
Value="{Binding YearCount}"/>
</Grid>
</StackPanel>
<Button Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,10,10,5"
Content="Simulate >>"
Command="{Binding SimulateCommand}"/>
</Grid>
<!-- This is right part of the window with datagrid -->
<DockPanel Grid.Column="1">
<WrapPanel DockPanel.Dock="Top">
<TextBlock Margin="10" Text="Total amount:" />
<TextBlock Text="{Binding TotalAmount"/>
</WrapPanel>
<!-- and the datagrid -->
<sf:SfDataGrid AutoGenerateColumns="False"
AllowDeleting="False"
AllowEditing="False"
IsReadOnly="False"
AllowGrouping="False"
AllowFiltering="False"
ItemsSource="{Binding History}">
<sf:SfDataGrid.Columns>
<sf:GridDateTimeColumn DisplayBinding="{Binding Date}" MappingName="PaymentDay" HeaderText="Date"/>
<sf:GridCurrencyColumn DisplayBinding="{Binding Amount}" MappingName="PayAmount" HeaderText="Amount"/>
</sf:SfDataGrid.Columns>
</sf:SfDataGrid>
</DockPanel>
</Grid>
So what is wrong with it?
I've the following xaml definition. The textblock inside the stackpanel is not wrapping.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="NotesText" Grid.Row="0" Grid.ColumnSpan="2" Hint="Add Notes" AcceptsReturn="True" Height="290" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="0" >
<CheckBox x:Name="showRequester" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Left" />
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Left" Text="option_show_to_requester" />
</StackPanel>
<CheckBox Grid.Row="1" Grid.Column="1" Content="Mail To Technicain" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Right" />
</Grid>
What I should do to make it wrap ? Thanks.
Update:
Problem with the alignment when using data template for check box content.
You can solve this by Providing Width of TextBlock.
You don't need to put a checkBox and a TextBlock into a StackPanel. To make the CheckBox's content Wrap, just use ContentTemplate of CheckBox.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="NotesText" Grid.Row="0" Grid.ColumnSpan="2" Hint="Add Notes" AcceptsReturn="True" Height="290" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
<!--Use ContentTemplate of CheckBox-->
<CheckBox Grid.Row="1" Grid.Column="0">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock Text="option_show_to_requester" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
<CheckBox Grid.Row="1" Grid.Column="1" Content="Mail To Technicain" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Right" />
</Grid>
for a simple example:
<Grid Grid.Row="1" x:Name="ContentRoot" Tapped="ContentRoot_Tapped">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<CheckBox Grid.Column="0">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" Text="wrap123123123123wrap" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
<CheckBox Grid.Column="1">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock Text="nowrap" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
</Grid>
And the run image is:
I realize Outlook's like scheduler. I took as the basis: http://www.codeproject.com/Articles/30881/Creating-an-Outlook-Calendar-Using-WPF-Part-2 , but my calendar should have some columns for show data by some count of users. Ofcourse, I can add some user's columns by XAML, but this is static solution and I don't know how many user's will show by my program.
How to improve this program for add dynamic count of user or may be there is some other open source WPF-control's for it?
XAML's code of Calendar style, which create 3 static column in the next:
<Style TargetType="{x:Type local:Calendar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Calendar}">
<Border Background="#E3EFFF"
BorderBrush="#6593CF"
BorderThickness="2,2,2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="38" />
<RowDefinition Height="22" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,0,0">
<Button Content="ToPreviousDay" Height="25" Command="{x:Static local:Calendar.PreviousDay}" Background="{x:Null}" BorderBrush="{x:Null}">
</Button>
<Button Content="ToNextDay" Height="25" Command="{x:Static local:Calendar.NextDay}" Background="{x:Null}" BorderBrush="{x:Null}">
</Button>
</StackPanel>
<Border BorderBrush="#6593CF" BorderThickness="0,0,1,1" Grid.Column="0" Grid.Row="1" />
<local:CalendarDayHeader Grid.Column="1" Grid.Row="1" x:Name="PART_DayHeader"/>
<ScrollViewer Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Visible" x:Name="PART_ScrollViewer">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<local:CalendarLedger Grid.Column="0" x:Name="PART_Ledger" Margin="0,25,0,0"/>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="User1_Column" x:Name="PART_Label"/>
<local:CalendarDay Grid.Row="1" x:Name="PART_Day" />
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="User2_Column" x:Name="PART_Label2"/>
<local:CalendarDay Grid.Row="1" x:Name="PART_Day2" />
</Grid>
<Grid Width>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="User3_Column" x:Name="PART_Label3"/>
<local:CalendarDay Grid.Row="1" x:Name="PART_Day3" />
</Grid>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to add user's columns dynamically
now I'm using the tabcontrol to arrange my UI. At the first, I put my button outside my tabcontrol; however, when I put the button into the tabcontrol, it gave message, Object reference not set to an object instance. Does anyone know why I got this message ?
edited
Below is my xaml:
<Window x:Class="StudySystem.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UI" Height="600" Width="811" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:my="clr-namespace:StudySystem" Loaded="Window_Loaded">
<Grid Width="791">
<Grid.RowDefinitions>
<RowDefinition Height="129*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Margin="2,0,0,42">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"></TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
I've seen this before, its code that references things in your form before you create the form. Check the order of what you are calling.
Inside Windows tag i have added this code and for me its working fine...
<Grid Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Grid.Row="1">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"> </TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
what you have mentioned in window_loaded??
I have listviews which have been ordered up to down. I put grid splitters between each listview. But the grid splitters are not working. I could not find out why they aren't working.
My codes are below.
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled" CanContentScroll="True">
<ListView Margin="1" Background="Snow" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Attributes" Grid.Column="0" Grid.Row="0" Width="55" />
<local:ListViewExt Grid.Column="0" Grid.Row="1" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Height="4" Margin="0,0,0,35" />
<TextBlock Text="Aktivitäten" Grid.Row="3" Width="50"/>
<local:ListViewExt Grid.Column="0" Grid.Row="4" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" Margin="0,0,0,38" />
<TextBlock Text="Projekte" Grid.Column="0" Grid.Row="6" Width="50" />
<local:ListViewExt Grid.Column="0" Grid.Row="7" Height="300" MinHeight="200"/>
<GridSplitter Grid.Row="8" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" Margin="0,0,0,38" />
<TextBlock Text="Akcademy" Grid.Column="0" Grid.Row="9" Width="55" />
<local:ListViewExt Grid.Column="0" Grid.Row="10" Height="300" MinHeight="200"/>
</Grid>
</ListView>
</ScrollViewer>
try giving the grid splitter a Vertical Orientation