I have an incredible annoying problem with accordion content template.
It shows perfectly, no problem with databinding or something else, but when i resize the browser window the tabControl inside the detail of the accordion doesn't resize at all.
It seems like the width is fixed but acctually it's not.
When the listbox has to change data because of the databinding, the tabcontrol resize perfectly to the new browser window size. Any suggestions please?
My code is:
<layoutToolkit:Accordion.ContentTemplate>
<DataTemplate>
<!--#Sinergia Wave2-->
<Grid>
<sdk:TabControl Grid.Row="1" Grid.ColumnSpan="4" Loaded="ListBox_Loaded" SizeChanged="ListaDetailControlli_SizeChanged">
<sdk:TabItem Header="Controlli">
<Grid Visibility="{Binding HasItems, Converter={StaticResource ConvertBooleanToVisible}}">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="4" Orientation="Horizontal">
<Grid SizeChanged="Grid_SizeChanged" Background="#FFC1C1C1" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<dataInput:Label Grid.Column="1" FontSize="12" FontWeight="Bold" Content="Controllo" HorizontalAlignment="Left" VerticalAlignment="Center" />
<dataInput:Label Grid.Column="3" FontSize="12" FontWeight="Bold" Content="Dettagli" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</StackPanel>
<ListBox Name="ListaDetailControlli" BorderThickness="0" Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding ListaControlli}" SelectionMode="Single"
SelectedItem="{Binding SelectedTask, Mode=TwoWay}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontSize="10" Margin="2,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left"
Text="{Binding DescrizioneControllo}" />
<Canvas Grid.Column="1"
Width="22"
Height="22"
Margin="0,0,4,0">
<Image Source="/Image/Traffic-no-light.png"
Width="22"
Height="22"
Margin="0,0,4,0" />
<Ellipse Canvas.Left="7"
Canvas.Top="2"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
<Ellipse Canvas.Left="7"
Canvas.Top="11"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
</Canvas>
<!-- #135162;dv;; Pannello Controlli -->
<TextBlock Grid.Column="2" FontSize="10" Margin="2,0,4,0" TextAlignment="Left" Text="{Binding DettaglioControllo}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</sdk:TabItem>
<sdk:TabItem Header="Task" GotFocus="TabTask_GotFocus">
<Grid VerticalAlignment="Stretch">
<Border BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Foreground="Red" FontSize="18" FontWeight="Bold" Text="Non รจ presente nessun task per il giorno selezionato" TextWrapping="Wrap"
Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisibleNegato}}" />
</Border>
<ScrollViewer BorderThickness="0" Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisible}}">
<ListBox x:Name="ListaTask" BorderThickness="0" Tag="{Binding ID_SERBATOIO}" MinWidth="250" Margin="-2,-1,-2,0" HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource CheckBoxItemContainerStyleWithStatusDiari}" ItemsSource="{Binding ListaTask}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0">
<StackPanel>
<Border x:Name="BorderDrop" Height="20" Margin="8,0,0,0" Background="Gray" BorderThickness="4" Canvas.ZIndex="-2" CornerRadius="9"
Opacity="0.8" Padding="0" Visibility="Collapsed">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.2" Color="Black" />
<GradientStop Offset="0.8" Color="#FFCDCCCC" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<controlsLIB:TaskMultiTemp DataContext="{Binding }" PannelloOspitante="{Binding LayoutOspitante,ElementName=panValidazioneOperatori,
Mode=OneWay}"
TemplateTipo="{Binding TemplateMultiTemp,ElementName=panValidazioneOperatori,Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</sdk:TabItem>
</sdk:TabControl>
</Grid>
</DataTemplate>
Related
In a WinUI 3 application, using CommunityToolkit.Mvvm.
All ViewModels are created by a DI container.
The parent Page has a ViewModel and contains a child UserControl that also has a ViewModel.
Right now the UserControl DataContext is bound to the ViewModel like this:
<controls:AddEditControl x:Name="AddEditControl"
DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />
What I tried to set ViewModel like this:
public sealed partial class AddEditControl : UserControl
{
public UserDetailsViewModel ViewModel
{
get;
}
public AddEditControl()
{
ViewModel = App.GetService<UserDetailsViewModel>();
this.InitializeComponent();
}
}
The issue is that setting a ViewModel in a code behind of the UserControl the same way its set in Page is not binding properly.
The goal is to be able to use the same x:Bind markup in the UserControl as in the Page.
<Page x:Class="SearchUserPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CSA2.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
xmlns:ctkControls="using:CommunityToolkit.WinUI.UI.Controls"
xmlns:customConverters="using:CSA2.Converters"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d"
Margin="-40">
<Page.Resources>
</Page.Resources>
<Grid x:Name="ContentArea">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0"
Margin="500 -78 60 0">
<StackPanel HorizontalAlignment="Right">
</StackPanel>
</Border>
<Grid x:Name="GridPanel"
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{x:Bind ViewModel.UserDetailsRowHeight, Mode=OneWay}"
MinHeight="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Margin="{StaticResource NavigationViewPageContentMargin}">
</Grid>
<Grid Grid.Row="1"
Margin="{StaticResource NavigationViewPageContentMargin}">
</Grid>
<Grid Grid.Row="2"
Background="#FAFAFA">
<TabView IsAddTabButtonVisible="False"
Background="#CCC">
<TabView.TabItems>
<TabViewItem x:Uid="UserDetailsTab"
IsClosable="False">
<controls:AddEditControl x:Name="AddEditControl"
DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />
</TabViewItem>
<TabViewItem Header="History"
IsClosable="False">
<TextBlock Text="User History"
Style="{StaticResource SubheaderTextBlockStyle}"
Margin="10" />
</TabViewItem>
</TabView.TabItems>
</TabView>
</Grid>
</Grid>
</Grid>
</Page>
<UserControl x:Class="Controls.AddEditControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
mc:Ignorable="d">
<UserControl.Resources>
</UserControl.Resources>
<Grid Margin="{StaticResource NavigationViewPageContentMargin}"
Padding="0 0 0 40">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0"
Command="{Binding EditUserCommand,Mode=TwoWay}"
IsChecked="{Binding IsEditButtonChecked, Mode=TwoWay}"
Margin="10"
HorizontalAlignment="Left"
Style="{ThemeResource DefaultToggleButtonStyle}"
Visibility="{Binding IsEditVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Edit" />
</Viewbox>
<TextBlock x:Uid="EditButton" />
</StackPanel>
</ToggleButton>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Margin="10 0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Button Command="{Binding SaveCommand}"
Style="{ThemeResource DefaultButtonStyle}"
Margin="10 0">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Save" />
</Viewbox>
<TextBlock x:Uid="SaveButton" />
</StackPanel>
</Button>
<Button Command="{Binding ResetCommand}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Undo" />
</Viewbox>
<TextBlock x:Uid="ResetButton" />
</StackPanel>
</Button>
</StackPanel>
<StackPanel Grid.Column="1"
Margin="10"
VerticalAlignment="Center"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock x:Uid="UserFunctionsText"
Style="{StaticResource DetailSubTitleStyle}" />
</StackPanel>
</Grid>
<Grid Row="1"
Grid.Column="0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
</Grid.Resources>
<TextBlock x:Uid="UserIdText"
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}"
Visibility="{Binding IsCreateNewUser, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}" />
<TextBox x:Uid="UserIdText"
Grid.Row="0"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserId, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}"
Visibility="{Binding IsCreateNewUser, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}" />
<TextBlock x:Uid="UserNameText"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<TextBox x:Uid="UserNameNullText"
Grid.Row="1"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserName, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}" />
<TextBlock x:Uid="UserEmailText"
Grid.Row="2"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<TextBox x:Uid="UserEmailNullText"
Grid.Row="2"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserEmail, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}" />
<TextBlock x:Uid="UserDepartmentText"
Grid.Row="3"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox Grid.Row="3"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
IsEditable="False"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
ItemsSource="{Binding UserDepartments}"
SelectedItem="{Binding UserDepartment, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}" />
<TextBox x:Uid="UserDepartmentNullText"
Grid.Row="3"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
Text="{Binding UserDepartment, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
<TextBlock x:Uid="UserStatusText"
Grid.Row="4"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox Grid.Row="4"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode,Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
IsEditable="False"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
ItemsSource="{Binding UserStatus}"
SelectedItem="{Binding SelectedUserStatus, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}" />
<TextBox Grid.Row="4"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
Text="{Binding SelectedUserStatus, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
<TextBlock x:Uid="UserRoleText"
Grid.Row="5"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox x:Name="UserRoles"
Grid.Row="5"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode,Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
IsEditable="False"
ItemsSource="{Binding UserRoles}"
SelectedItem="{Binding SelectedUserRole, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="SelectionChanged">
<ic:InvokeCommandAction Command="{Binding SelectedItemCommand}"
CommandParameter="{x:Bind UserRoles.SelectedItem,Mode=OneWay}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</ComboBox>
<TextBox Grid.Row="5"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
HorizontalAlignment="Stretch"
Text="{Binding SelectedUserRole, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
</Grid>
<Grid Grid.Column="1"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
</Grid>
<Grid Row="2"
Visibility="{Binding IsEditButtonChecked, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Margin="10 -50 10 0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Button Command="{Binding SaveCommand}"
Style="{ThemeResource DefaultButtonStyle}"
Margin="10 0">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Save" />
</Viewbox>
<TextBlock x:Uid="SaveButton" />
</StackPanel>
</Button>
<Button Command="{Binding ResetCommand}"
Style="{ThemeResource DefaultButtonStyle}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Undo" />
</Viewbox>
<TextBlock x:Uid="ResetButton" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Grid>
</UserControl>
using CSA2.ViewModels;
// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.
namespace CSA2.Views;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class SearchUserPage : Page
{
public SearchUserViewModel ViewModel
{
get;
}
public SearchUserPage()
{
ViewModel = App.GetService<SearchUserViewModel>();
InitializeComponent();
}
}
I want to split my window in 2 parts side by side, like the picture below. On each side I have a SwapChainPanel and a StackPanel with a TextBlock, a TextBox and a Button.
Below that, I have a console (TextBlock) which takes up the entire width of the window.
How can I do that in XAML?
I have this but it does not split the window into 2 equal parts:
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" >
<TextBlock />
</StackPanel>
</StackPanel>
StackPanel are for stacking Items One after another or one below another. So you will not get exact split. For that you Need to use Grid.
I marked up a basic XAML based on your Screenshot.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Blue" BorderThickness="5,5,2.5,5" Grid.Row="0" Grid.Column="0" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_L" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 1: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Blue" BorderThickness="2.5,5,5,5" Grid.Row="0" Grid.Column="1" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_R" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 2: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Green" BorderThickness="5" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,5,0,0" Padding="5">
<TextBox Text="> Console" Foreground="Green" />
</Border>
</Grid>
Which Renders to
I'm trying to create a listview that has column headers and the lists fields mimics the width of its corresponding header. No bindings fail but the textblocks width in the data template don't match up with their headers width. I'm guessing because the data template can't find the element. Any ideas to get this to work?
<Grid Grid.Column="1" Grid.Row="1" x:Name="listViewHeaders" Height="50" VerticalAlignment="Top" Margin="10,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--<controls:CustomGridSplitter/>-->
<TextBlock x:Name="nameHeader" Grid.Column="0" Text="Name" />
<TextBlock x:Name="typeHeader" Grid.Column="1" Text="Type" />
<TextBlock x:Name="colorHeader" Grid.Column="2" Text="Color" />
</Grid>
<ListView x:Name="ListView" Grid.Row="1" Grid.Column="1" Background="#FF494949" Margin="10,50,10,0" ItemsSource="{Binding CurrentCardList}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ActualWidth, ElementName=ListView}">
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>-->
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Column="0" Width="{Binding ActualWidth, ElementName=nameHeader}" Text="{Binding Name}" />
<TextBlock Grid.Column="1" Width="{Binding ActualWidth, ElementName=typeHeader}" Text="{Binding Type}" />
<TextBlock Grid.Column="2" Width="{Binding ActualWidth, ElementName=colorHeader}" Text="{Binding Color}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
The bindings work fine. But you're assuming that TextBlock elements in the header row will fill out the entire table cell, which they won't. They only fill as much space as much text they contain. In your case that's about 30px. You can find this information by using the Live Visual Tree feature of VS 2015.
You can solve the problem by wrapping the header TextBlock elements in another element that will fill out all available space, such as Border. Here's the solution:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="listViewHeaders" Height="50" VerticalAlignment="Top" Margin="10,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!--<controls:CustomGridSplitter/>-->
<Border Background="Blue" HorizontalAlignment="Stretch" Grid.Column="0" x:Name="nameHeader">
<TextBlock Text="Name" />
</Border>
<Border Background="Red" x:Name="typeHeader" Grid.Column="1">
<TextBlock Text="Type" HorizontalAlignment="Stretch" />
</Border>
<Border Background="Yellow" x:Name="colorHeader" Grid.Column="2">
<TextBlock Text="Color" HorizontalAlignment="Stretch" />
</Border>
</Grid>
<ListView x:Name="ListView" Background="#FF494949" Margin="10,50,10,0" ItemsSource="{Binding CurrentCardList}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ActualWidth, ElementName=ListView}">
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>-->
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Column="0" Width="{Binding ActualWidth, ElementName=nameHeader}" Text="{Binding Name}" />
<TextBlock Grid.Column="1" Width="{Binding ActualWidth, ElementName=typeHeader}" Text="{Binding Type}" />
<TextBlock Grid.Column="2" Width="{Binding ActualWidth, ElementName=colorHeader}" Text="{Binding Color}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
This will create the following effect, which I believe is what you're after.
Here's the link to the complete solution - http://1drv.ms/1eUzLHl
I have a page that has a ListBox. Whose items are not getting visible.But my ListBox is visible , I have checked it by changing its Background Color. Here is my ListBox :-
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Name="friend_list" Margin="0,10,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid Width="{Binding ElementName=friend_list,Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Margin="0,30,80,10">
<TextBlock TextWrapping="Wrap" Text="Diana Jayson" Name="username" FontWeight="Bold" FontSize="40" Margin="12,0,0,0" Foreground="#FF4D6082" Width="250" />
<TextBlock Text="Diana Jayson" Name="location" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
<TextBlock Text="Diana Jayson" Name="sate" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
</StackPanel>
<Image Grid.Column="0" Source="Assets\profile-placeholder.gif" Width="160" Height="160" Stretch="Fill" HorizontalAlignment="Left" Margin="10,0,0,0">
<Image.Clip>
<EllipseGeometry Center="80,80" RadiusX="80" RadiusY="80" />
</Image.Clip>
</Image>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
you will have to bind the list of element to the listbox to display its member ..
like this....
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Name="friend_list" ItemSource="{Binding yourlistname}" Margin="0,10,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid Width="{Binding ElementName=friend_list,Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Margin="0,30,80,10">
<TextBlock TextWrapping="Wrap" Text="Diana Jayson" Name="username" FontWeight="Bold" FontSize="40" Margin="12,0,0,0" Foreground="#FF4D6082" Width="250" />
<TextBlock Text="Diana Jayson" Name="location" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
<TextBlock Text="Diana Jayson" Name="sate" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
</StackPanel>
<Image Grid.Column="0" Source="Assets\profile-placeholder.gif" Width="160" Height="160" Stretch="Fill" HorizontalAlignment="Left" Margin="10,0,0,0">
<Image.Clip>
<EllipseGeometry Center="80,80" RadiusX="80" RadiusY="80" />
</Image.Clip>
</Image>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
and in the template you can directly bind the ui with the properties which are inside your list object..
I hope this might help...
I am using a Listview with an Itemtemplate and a Headertemplate.
Both templates contain 6 Columns. Everything is ok if i set a fixed column width for the templates - like in figure one.
But i want to set the width to "Auto" for the items - but then i get figure 2...
How to handle this?
Is it possible to set the Header Column width with c#? - or any other solution?
Figure 1:
Figure 2:
Code Listview:
<ListView x:Name="DayanalyseListView"
HorizontalAlignment="Center"
VerticalAlignment="Top"
ItemTemplate="{StaticResource DataTemplate}"
HeaderTemplate="{StaticResource HeaderTemplate}">
</ListView>
Headertemplate:
<DataTemplate x:Key="HeaderTemplate" >
<Grid Height="36" Background="DarkGray" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="95"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*" MinWidth="900"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="DayProject" TextWrapping="Wrap" Text="Project" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayTask" TextWrapping="Wrap" Text="Task" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayFrom" TextWrapping="Wrap" Text="From" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayTill" TextWrapping="Wrap" Text="Till" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DaySum" TextWrapping="Wrap" Text="Sum" Grid.Column="4" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
<TextBlock x:Uid="DayNote" TextWrapping="Wrap" Text="Note" Grid.Column="5" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" />
</Grid>
</DataTemplate>
Itemtemplate:
<DataTemplate x:Key="DataTemplate">
<Grid d:DesignHeight="50" Margin="0,5,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="95"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding ProjectName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="0" ToolTipService.ToolTip="{Binding ProjectName}"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding TaskName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="1" ToolTipService.ToolTip="{Binding TaskName}"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StartTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="2"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StopTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="3"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Sum}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="4"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Note}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" ToolTipService.ToolTip="{Binding Note}" Grid.Column="5"/>
</Grid>
</DataTemplate>
The following works perfectly in my case:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="ListViewHeaders" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Title Col 1" />
<TextBlock Grid.Column="1" Text="Title Col 2" />
<TextBlock Grid.Column="2" Text="Title Col 3" />
<TextBlock Grid.Column="3" Text="Title Col 4" />
<TextBlock Grid.Column="4" Text="Title Col 5" />
</Grid>
<ListView x:Name="myTable" Grid.Row="1" ItemsSource="{Binding SomeCollection}" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=myTable, Path=ActualWidth}" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ItemProperty1}" />
<TextBlock Grid.Column="1" Text="{Binding ItemProperty2}" />
<TextBlock Grid.Column="2" Text="{Binding ItemProperty3}" />
<TextBlock Grid.Column="3" Text="{Binding ItemProperty4}" />
<TextBlock Grid.Column="4" Text="{Binding ItemProperty5}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
ListView does not operate like a DataGrid. ListView only understands rows and doesn't understand columns. You can simulate columns like you are by using a Grid, but the important thing to understand is that the item and the header are two completely separate UI elements.
Meaning there is no easy to have the size of the columns in the item change the size of the columns in the header. Even if you were to name them, they are part of a template so the names won't be of any use (remember, there will be multiple items created).
I recommend you stay with fixed widths, use * widths or use an actual DataGrid control.
The following worked for me. The key was to set the HorizontalContentAlignment property to Stretch.
<ListView Grid.Row="6" Name="lvMembersSearchResults" Background="LightGray" ItemClick="lvMembersSearchResults_ItemClick" IsItemClickEnabled="True" Margin="5,5,5,5">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.Header>
<Style TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.Header>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="tbRank" TextWrapping="Wrap" Text="Rank" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbName" TextWrapping="Wrap" Text="Name" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbTaxId" TextWrapping="Wrap" Text="Tax ID" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
<TextBlock x:Uid="tbCommand" TextWrapping="Wrap" Text="Cmd" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="30" Background="DarkBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap" Text="{Binding Rank}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" />
<TextBlock TextWrapping="NoWrap" Text="{Binding Name}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding TaxId}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding Command}" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Adding a UserControl worked for me.
<ListView x:Name="listView" ItemsSource="{Binding SomeCollection}" >
<ListView.ItemTemplate>
<DataTemplate>
<UserControl Width="{Binding ElementName=listView, Path=ActualWidth}">
<Grid>
....
</Grid>
</UserControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>`
For stretching items to full ListView width try this:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Number}" />
<TextBlock Grid.Column="1" Text="{Binding Text}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can try to create your own UserControl with properties that calculates width for each column and bind to this properties in template. May be this help.