How to set width to 100% in WPF - wpf

Is there any way how to tell component in WPF to take 100% of available space?
Like
width: 100%;
in CSS
I've got this XAML, and I don't know how to force Grid to take 100% width.
<ListBox Name="lstConnections">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="LightPink">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=User}" Margin="4"></TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Password}" Margin="4"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Path=Host}" Margin="4"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Result looks like
alt text http://foto.darth.cz/pictures/wpf_width.jpg
I made it pink so it's obvious how much space does it take. I need to make the pink grid 100% width.

It is the container of the Grid that is imposing on its width. In this case, that's a ListBoxItem, which is left-aligned by default. You can set it to stretch as follows:
<ListBox>
<!-- other XAML omitted, you just need to add the following bit -->
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

You could use HorizontalContentAlignment="Stretch" as follows:
<ListBox HorizontalContentAlignment="Stretch"/>

Related

How to center UserControl in a TabControl

My MainWindow is built with TabContol containing in each tab UserControl in xaml files. Opening specific UserControl is not a problem, but aligning it is. I was able to horizontally center content of tab but struggle to vertically do this same. I found out that the root problem is that UserControl don't take the whole free space (height) in the Tab. I tried to make main grid VerticalAlignment="Stretch" and "Center" but that didn't help. I could use margin with specific number or define row fixed hight but that will not work on every resolution and I don't want to write method in code behind but use the power of xaml. How can I force UserControl to take whole height in Tab and then vertically center it (it's important to do it for specific UserControl because others should have default position)?
ps. I'm using MetroWindow from MahApps.Metro.
MainWindow main Grid:
<Grid>
<StackPanel>
<TabControl ItemsSource="{Binding Tabs}"
SelectedIndex="0">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment"
Value="Center" />
</Style>
<DataTemplate DataType="{x:Type VMod:LoginViewModel}">
<Pages:LoginView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:AdminViewModel}">
<Pages:AdminView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:ProductsViewModel}">
<Pages:ProductsView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:DistributionViewModel}">
<Pages:DistributionView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SummaryViewModel}">
<Pages:SummaryView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SettingsViewModel}">
<Pages:SettingsView />
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type inter:ITab}">
<TextBlock>
<Run Text="{Binding TabName}" />
</TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</StackPanel>
</Grid>
UserControl main Grid:
<Grid Background="LightBlue"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Height="300"
Width="300"
Grid.Row="2"
BorderBrush="LightGray"
BorderThickness="1">
<StackPanel HorizontalAlignment="Center">
<iconPacks:PackIconRPGAwesome Kind="Honeycomb"
HorizontalAlignment="Center"
Width="60"
Height="60"
Margin="0, 0, 0, 0"/>
<TextBlock HorizontalAlignment="Center"
Text="DistributionTool"
FontSize="20"
FontWeight="Bold"
Margin="5" />
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Margin="5"
TextAlignment="Left"
FontSize="15"/>
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="AccountTie"
Width="20"
Height="20"
VerticalAlignment="Center"/>
</Grid>
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<PasswordBox Grid.Column="0"
Margin="5"
HorizontalContentAlignment="Left"
FontSize="15"
Style="{StaticResource Win8MetroPasswordBox}" />
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="Key"
Width="20"
Height="20"
VerticalAlignment="Center" />
</Grid>
<Button Content="LOGIN"
Width="80"
metro:ControlsHelper.ContentCharacterCasing="Normal"
Margin="5"
Style="{StaticResource AccentedSquareButtonStyle}" />
</StackPanel>
</Border>
</Grid>
From what I gather, what you could try would be:
Remove the StackPanel in your MainWindow Grid. Unless you intend to have more than 1 child inside the stack panel (Other than your TabControl), it is useless.
Add VerticalAlignement="Stretch" to your TabControl. This will allow it to take up all the space it can vertically.
Then you should be pretty much set to go.
The reason why you shouldn't use a StackPanel unless you intend to stack items inside, as in
<StackPanel>
<Child1/>
<Child2/>
</StackPanel>
is that the StackPanel.Orientation property affects how things will appear inside, including the Alignement of each child.
So Orientation="Vertical" (the default), affects the VerticalAlignement of its children. Same idea with Horizontal.

Star sizing Grid columns in an ItemsControl?

I have a ListBox with an ItemsControl bound to a collection in my view model. I'm trying to use star sizing on a grid column within the DataTemplate and set the element within that column (a progress bar) to stretch. This normally would take up all available horizontal space in the grid however nested in an ItemsControl this does not seem to be the case. I've done a bit of reading around & there seems to be known issues using these controls together. Is there a solution to this?
<ListBox>
<ItemsControl ItemsSource="{Binding WebMappingSourcesCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid
ShowGridLines="True"
Grid.IsSharedSizeScope="true"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox
Grid.Column="0"
HorizontalAlignment="Center" />
<TextBlock
Grid.Column="1"
Text="{Binding Name}"/>
<ProgressBar Grid.Column="2"
Minimum="0"
Maximum="100"
Value="30"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
MaxHeight="15"
/>
<!-- etc. etc. -->
Try setting HorizontalContentAlignment on your listbox item by giving ItemContainerStyle like below.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

TreeViewItem Tooltip Binding Not Working

I have a treeview. It's bound to an ObservableCollection called Nodes. The bound data on the tool tips is not showing:
<controls:TreeViewEx BorderThickness="0"
ItemsSource="{Binding Nodes}"
SelectedItemEx="{Binding SelectedTreeNode, Mode=TwoWay}">
<controls:TreeViewEx.ToolTip>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.Column="0"
Source="/FMG.UI.WPF;component/Media/Images/job_128.png"
Height="16"
Width="16"/>
<TextBox Grid.Row="0"
Grid.Column="1"
Text="Job: "
FontWeight="Bold"/>
<TextBox Grid.Row="0"
Grid.Column="2"
Text="{Binding ToolTipHeader}"/>
<Border Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="3"
Height="2"
BorderBrush="Gray"/>
<TextBox Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3"
Text="{Binding ToolTipDetails}"/>
</Grid>
</controls:TreeViewEx.ToolTip>
</controls:TreeViewEx>
The tooltip pops up, but the ToolTipHeader and and ToolTipDetails are blank. The Output window says it can't find them on the view model. How do I make the binding look on the Node, not the view model?
You probably want to move the code; use the TreeView.ItemContainerStyle and add a Setter for the ToolTip, this will set a node-level tool-tip.
e.g.
<controls:TreeViewEx.ItemContainerStyle>
<Style TargetType="controls:TreeViewItemEx"> <!-- Guessing at item type name here -->
<Setter Property="Tooltip">
<Setter.Value>
<!-- Move your tooltip here -->
</Setter.Value>
</Setter>
</Style>
</controls:TreeViewEx.ItemContainerStyle>
Of course the DataContext for all the bindings in the tooltip will be the current item, if you want the context of the tree-view specify a RelativeSource that finds it (also prepend "DataContext" on the Path, otherwise you bind to properties directly on the tree-view).

Silverlight PivotItem not scrolling down

PivotItem can't scroll down... Anyone has any ideas as to how I can remedy this?
For whatever the reason just won't scroll down when content that is bound inside the listbox is longer than the height of the page. I tried adding a grid inside the pivotitem with height set to auto, but to no avail.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<controls:Pivot Height="Auto">
<controls:PivotItem Header="Main Information">
<Border CornerRadius="10" Background="#FF5C7590" Height="Auto" Padding="2" BorderThickness="1">
<ListBox x:Name="lbxPropertyItems">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="5, 0, 0, 0" Grid.Column="0" Text="{Binding Label}" />
<TextBlock Grid.Column="1" Text="{Binding Value}" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</controls:PivotItem>
</controls:Pivot>
</Grid>
Thanks for any advice.
The issue is that a StackPanel has an infinite layout space in which ever orientation it is set, so the ScrollViewer included in the ListBox never gets activated in that direction. The best way to handle it is to host it inside a Grid control with row or column definitions.

Why does a WPF DataGrid sometimes remain horizontally shrunk?

I have a user who sometimes sees a DataGrid that doesn't expand to fit its space: visually squeezed data grid http://www.varigence.com/images/compressedDataGrid.jpg.
I'm looking to solve the mystery of why this is happening. Usually, when the Grid first loads, the DataGrid will appear shrunk for a moment, but then expands to fill the appropriate space. The sole lead I have is that the user who sees this says it doesn't repro when he disables Aero in Windows.
I've added a (simplified) snippet of the XAML I'm using below.
Does anyone out there have ideas as to the cause?
Thanks,
-Craig
<Grid
AllowDrop="True"
Background="White"
MinHeight="400"
MinWidth="1100"
MaxHeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type Editors:DesignerEditor}}, Path=MainWindowScrollViewer.ViewportHeight, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
MaxWidth="{Binding RelativeSource={RelativeSource AncestorType={x:Type Editors:DesignerEditor}}, Path=MainWindowScrollViewer.ViewportWidth, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="350" Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="250" Width="*"/>
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
BorderThickness="1"
BorderBrush="{StaticResource headerBackgroundBrush}"
CornerRadius="4"
HorizontalAlignment="Stretch"
Margin="10,10,0,10"
VerticalAlignment="Stretch"
>
<Grid
KeyboardNavigation.TabNavigation="Local"
>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Text="Columns"
/>
<DataGrid:SelectingDataGrid
x:Name="columnDataGrid"
Grid.Row="1"
AutoGenerateColumns="False"
BorderBrush="{StaticResource excelBorderBrush}"
HorizontalAlignment="Left"
ItemsSource="{Binding ElementName=tableEditor, Path=SelectedContext.Columns.FilterCollection}"
RowDetailsTemplateSelector="{StaticResource columnDetailsTemplateSelector}"
RowDetailsVisibilityMode="VisibleWhenSelected"
SelectionMode="Extended"
SelectionUnit="FullRow"
>
<DataGrid:SelectingDataGrid.ItemContainerStyle>
<Style
TargetType="{x:Type DataGridRow}"
BasedOn="{StaticResource {x:Type DataGridRow}}"
>
<Setter
Property="IsSelected"
Value="{Binding IsSelected, Mode=TwoWay}"
/>
</Style>
</DataGrid:SelectingDataGrid.ItemContainerStyle>
<DataGrid:SelectingDataGrid.Columns>
...
</DataGrid:SelectingDataGrid.Columns>
</DataGrid:SelectingDataGrid>
</Grid>
</Border>
<GridSplitter
Grid.Column="1"
Background="White"
IsTabStop="False"
ResizeBehavior="PreviousAndNext"
Width="20"
/>
I'm going to assume that you want the DataGrid to fill up the left column. If you change
HorizontalAlignment="Left"
to
HorizontalAlignment="Stretch"
it should solve the problem.

Resources