I would like to fill my Dock panel with 9 textblocks. I would like the text blocks to fill the entire dock panel. I have set the height to auto and the vertical/horizontal alignment to stretch.
The textblocks, however, don't fill the entire dock panel. Any ideas on what can be going wrong. Thanks
My dockpanel lives in a grid.
<Border DockPanel.Dock="Top" Background="White" BorderBrush="DodgerBlue" BorderThickness="5,5,5,5" CornerRadius="10" Margin="2" Height="700">
<DockPanel >
<TextBlock DockPanel.Dock="Top" Name="txtID" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">1</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtOAG" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">2</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtFAILURE_ID" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">3</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtWIDTH" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">4</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtHeight" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">5</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtBARCODE_READ" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">6</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtBARCODE_NUM" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">7</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtANOMOLY" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">8</TextBlock>
<TextBlock DockPanel.Dock="Top" Name="txtTRACECODE" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto">9</TextBlock>
</DockPanel>
</Border>
DockPanel "docks" to sides, StackPanel "stacks" together. You should use a Grid.
Like this (example for 3 rows):
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="1" />
<TextBlock Grid.Row="1" Text="2" />
<TextBlock Grid.Row="2" Text="3" />
</Grid>
Related
I am using listbox of images its increasing the memory usage upto giga bytes.I am using this xaml.
<Grid Grid.Row="0" Grid.Column="1">
<ScrollViewer>
<ListBox ItemsSource="{Binding Path=FilterImportSlideCollection}" ItemTemplate="{StaticResource slideItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</ScrollViewer>
</Grid>
And the template is
<DataTemplate x:Key="slideItemTemplate" >
<Grid Width="100" Height="130" Margin="2 2 2 2" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="White" BorderBrush="Black" BorderThickness="1" Grid.Row="0" Panel.ZIndex="3" Canvas.Left="0" Canvas.Right="0">
<Image MinWidth="100" MinHeight="80" HorizontalAlignment="Center" Source="{Binding ImagePath, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"></Image>
</Border>
<TextBlock HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Title}" Foreground="Black"/>
</Grid>
</DataTemplate>
each ImagePath has the path of images like
"https://localhost:2673/SlideThumbnail/1272.png"
Placing the ListBox inside a ScrollViewer disables UI Virtualization meaning all your ListItems are created in memory at once.
try:
<Grid Grid.Row="0" Grid.Column="1">
<ListBox ItemsSource="{Binding Path=FilterImportSlideCollection}" ItemTemplate="{StaticResource slideItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</Grid>
For further information about virtualization have a look at MSDN:
Displaying Large Data Sets
This question already has an answer here:
WPF Grid horizontalalignment doesn't work. Sizes don't changes
(1 answer)
Closed 8 years ago.
In this window I have many different controls and I want to stretch which is possible
but there are some controls by 'stackGroup', 'listBox1', 'listBox2' that don't stretching.. Why ??
Also is this way i right to do this kind of pages
<Window x:Class="TwoColumnGridSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Window_Loaded"
Title="Window1" Height="759" Width="800">
<Grid Margin="0,0,0,95">
<Grid.RowDefinitions>
<RowDefinition Height="509"></RowDefinition>
<RowDefinition Height="111"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="472" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="165" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Stretch" Margin="0,0,0,163">
<ListBox Name="listBox1" SelectedItem="{Binding SelectedItem}" Width="165" ItemsSource="{Binding Buttons}" SelectionChanged="ListBox_SelectionChanged" HorizontalContentAlignment="Left" VerticalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding .}" Click="Button_Click" Style="{StaticResource listboxbuttons}"></Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Name="stackGroup" HorizontalAlignment="Stretch" Grid.Column="1" Height="457" VerticalAlignment="Top" >
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="460" Margin="0,0,10,0" >
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="24" />
<RowDefinition Height="316"/>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Image x:Name="imageMap" Source="Resources/images.jpg" HorizontalAlignment="Stretch" Grid.Row="0" Stretch="Fill" Margin="2,0,0,0" />
<Border BorderBrush="Green" BorderThickness="3" CornerRadius="1,1,1,1" Margin="2,4,0,17" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2">
<Grid Grid.Row="1" Margin="3,3,3,3">
<GroupBox Header="Club Badge" HorizontalAlignment="Left" VerticalAlignment="Top" Height="123" Width="134"/>
<GroupBox Header="Goalie" HorizontalAlignment="Left" VerticalAlignment="Top" Height="179" Width="134" Margin="0,128,0,0"/>
<GroupBox Header="Defender" HorizontalAlignment="Left" Margin="139,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="MidFielder" HorizontalAlignment="Left" Margin="278,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="GroupBox" HorizontalAlignment="Left" Margin="417,0,0,0" VerticalAlignment="Top" Height="307" Width="155"/>
</Grid>
</Border>
<ProgressBar BorderBrush="#FF6081B0" HorizontalAlignment="Stretch" Margin="2,303,0,43" Value="45" Grid.Row="2" Foreground="#FF6081B0" Grid.RowSpan="2" />
</Grid>
</StackPanel>
</Grid>
<ListBox Height="96" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Bottom" Name="listBox2" Width="782" Grid.RowSpan="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="30 0 30 0" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem Content="Vertical Item 1" />
<ListBoxItem Content="Vertical Item 2" />
<ListBoxItem Content="Vertical Item 3" />
<ListBoxItem Content="Vertical Item 4" />
<ListBoxItem Content="Vertical Item 5" />
</ListBox>
</Grid>
</Window>
Same answer as in this question. StackPanel will not respect stretch alignments in the same direction as its orientation. So a StackPanel whose orientation is vertical will not respect a VerticalAlignment of stretch for a child.
listBox1 doesn't stretch because it's VerticalAlignment is stretch and it's container StackPanel has an orientation of Vertical (that's its default). You could change that StackPanel to be horizontal, replace it with another container (such as a DockPanel), or remove it entirely since it only contains one element.
Similar reasoning can be applied to your other issues
There is DockPanel with three child controls placed side by side in a horizontal manner:
1) TreeView
2) RichTextBox
3) Grid
RichTextBox lies in middle of TreeView and Grid. I made RichTextBox the last child of DockPanel and set LastChildFill attribute to True. Now since Grid can be closed at run time, I want the RichTextBox to occupy all the space that became empty after the Grid is closed. But if the Grid is again shown the RichTextBox should contract from Right hand side to allow the Grid to fit in. How to achieve this? I'm new to WPF. Also, how to hide the Grid? Here is the XAML.
<DockPanel Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True">
<Border BorderThickness="1" DockPanel.Dock="Left" Height="Auto" HorizontalAlignment="Stretch" Margin="1" VerticalAlignment="Stretch" Width="Auto" CornerRadius="0" BorderBrush="#FF646464">
<TreeView Name="TV" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
<Border Name="Notification_Pane" BorderThickness="1" DockPanel.Dock="Right" Height="Auto" HorizontalAlignment="Stretch" Margin="1" VerticalAlignment="Stretch" Width="Auto" CornerRadius="0" BorderBrush="#FF646464">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="Notification" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="LemonChiffon" Grid.Row="0" Grid.Column="0"/>
<Button Name="btn_Close" Content="X" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LemonChiffon" Height="Auto" Width="Auto" Grid.Row="0" Grid.Column="1" Padding="10,0,10,0" BorderThickness="0" Cursor="Hand" Focusable="True" IsHitTestVisible="True" ClickMode="Release" Click="Button_Click" />
<ScrollViewer Height="Auto" Name="ScrollViewer" Width="Auto" Margin="0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<StackPanel CanVerticallyScroll="True" Height="Auto" Name="Notification_Panel" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
<Border BorderThickness="1" Height="Auto" HorizontalAlignment="Stretch" Margin="1" VerticalAlignment="Stretch" Width="Auto" CornerRadius="0" BorderBrush="#FF646464">
<RichTextBox Name="rtb" Height="Auto" Width="Auto" Grid.Row="2" HorizontalAlignment="Stretch" Grid.Column="1" Margin="0" />
</Border>
</DockPanel>
You can use Grid.Visibility property to show and hide the grid.
The following code should do the job:
private void Button_Click(object sender, RoutedEventArgs e) //X Button click event.
{
//grid is the name of our Grid Control we want to hide.
grid.Visibility = System.Windows.Visibility.Collapsed;
}
to show the grid again you should use the following code:
grid.Visibility = System.Windows.Visibility.Visible;
The RichTextBox control will always fit in the DockPanel Control.
I have a .NET 4.0 WPF application using the MVVM pattern and I've been unable to achieve the desired outcome on one of the screens (UserControl as View). I have stripped down most of the page to show the core of the problem. The page consists of a grid with three rows and one column. The first row contains header text and the last row contains a Save button. The middle row contains a grid with one row and column and displays an ObservableCollection in an ItemsControl with a data template of a custom user control. There are ten items in the collection and I want them to display in two columns and five rows so I have a WrapPanel as an ItemsPanelTemplate.
I want the ItemsControl to scroll within the available space but it is expanding to the size of content and most of it is being cropped off the bottom of the page.
I am listing the XAML for user control the ObservableCollection uses as a data template and the XAML for the main page below that. Any help is greatly appreciated.
<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="120" d:DesignWidth="150">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical">
<Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png">
<Image.ToolTip>
<Image Source="{Binding Path=ToolTipImagePath}" />
</Image.ToolTip>
</Image>
<Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" />
<CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?"
IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}"
IsEnabled="{Binding Path=ComponentSelected}" />
<CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center"
IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" />
</StackPanel>
</Border>
</Grid>
And here is the main XAML page:
<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab"
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:igWPF="http://infragistics.com/Editors"
xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes"
mc:Ignorable="d"
d:DesignHeight="570" d:DesignWidth="866">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="ShopNotesComponentsTemplate">
<uc:ShopNoteComponent />
</DataTemplate>
</UserControl.Resources>
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=AddNewTemplateCommand}"
Content="Add" />
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=EditTemplateCommand}"
Content="Edit" />
<Grid Margin="10,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center"
ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}"
DisplayMemberPath="CONFIGURATION_DESC"
SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}"
Value="Select Shop Notes Template"
NullText="Select Shop Notes Template"
IsEditable="True">
</igWPF:XamComboEditor>
</StackPanel>
</Grid>
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" />
<ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center"
Background="{x:Null}"
Command="{Binding Path=SaveTemplateCommand}"
Content="Save" />
</Grid>
</Border>
EDIT: Changed question title as I have removed the ScrollViewer between starting the question and actually posting it. Also, noticed the Save button was in the inner grid rather than outer grid so I have corrected that (no change in rendering).
An ItemsControl does not have its own ScrollViewer like a ListBox. You can either replace you ItemsControl with a ListBox, or simply wrap it in a ScrollViwer, being careful to move the Grid.Row and Grid.Column settings like this:
<ScrollViewer Grid.Row="1" Grid.Column="0">
<ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items,
UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
I created a grid. On this grid, i have two colums with two TextBlock
I would like to insert a space between my columns, in order to having space between my textBlocks.
How doing this ?
Here is my code :
<ListBox x:Name="ListBoxTiers" HorizontalContentAlignment="Stretch" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid Margin="10" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks a lot :)
Instead of playing with the columnns, set a margin around the textbox.
<TextBox Margin="10">
You can set each side independently or set left/right and up/down:
<TextBox Margin="10, 3, 7, 0">
<TextBox Margin="10, 5">
Or wrap your TextBoxes inside another panel and set the margin there:
<Grid Margin="10">
<TextBox />
<TextBox />
</Grid>