locked
ListView ControlTemplate and ItemTemplate problem

    Question

  • I am new to xaml and windows store app. I am trying to modify existing listview.

    My ItemTemplate is :

    <DataTemplate  x:Key="AllSubjectsItemTemplate">
                <StackPanel Orientation="Horizontal">
                    <CheckBox x:Name="checkBox" HorizontalAlignment="Left" Margin="10,7,0,0" VerticalAlignment="Top" Controls:CustomListViewCheckChangedCommand.ItemCheckChanged="RandomTextSoEventsGetAttached" IsChecked="{Binding IsChecked,Mode=TwoWay}"/>
                    <TextBlock Grid.Column="1" HorizontalAlignment="Left" Text="{Binding SubjectName}" TextWrapping="WrapWholeWords" Margin="22,10,0,0" VerticalAlignment="Top" Width="298" Height="auto" />
                </StackPanel>
                
    
    </DataTemplate>

    And my ControlTemplate (ItemContainerStyle) is:

    <Style x:Key="ListViewItemStyleAllSubjects" TargetType="ListViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Margin" Value="0,0,18,2"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" ContentMargin="2" ContentTransitions="{TemplateBinding ContentTransitions}" CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" >
                            	<StackPanel Height="100" Width="398" Orientation="Horizontal">
    								<ContentPresenter Width="318" />
    								<Rectangle Width="80" Fill="#FF616060" />
    							</StackPanel>
                            </ListViewItemPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
    </Style>
    

    When I bind data, data template is applied but actual data do not reach controls in datatemplate for binding. So what is get is listitems containing just checkboxes and the rectangle of 'ControlTemplate' is not present at all.

    What I want is Rectangle in control template to shown on pointer over.I can change visual states, that's why I put rectangle in control template and Data of 'ItemsSource' to be shown in place of 'ContentPresenter' with specified datatemplate.

    Sunday, June 15, 2014 10:29 AM

All replies

  • Can you provide a minimal sample that demonstrates what you are doing, including both the Xaml and the code-behind that's being bound to?

    --Rob

    Monday, June 16, 2014 12:59 AM
    Owner
  • Can you provide a minimal sample that demonstrates what you are doing, including both the Xaml and the code-behind that's being bound to?

    --Rob

    I am trying to make a user control like this.

    <UserControl
        x:Class="CustomControls.CustomListView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:CustomControls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
    
        <UserControl.Resources>
            <Style x:Key="ListViewItemStyleAllSubjects" TargetType="ListViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" ContentMargin="2" ContentTransitions="{TemplateBinding ContentTransitions}" CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" >
                                <StackPanel Height="100" Width="398" Orientation="Horizontal">
    								<ContentPresenter Width="318" />
    								<Rectangle Width="80" Fill="#FF616060" />
    							</StackPanel>
                            </ListViewItemPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
            
    
        </UserControl.Resources>
    
    
        <ListView x:Name="RootListView"
                SelectionMode="Extended"
                CanDragItems="True"
                SelectionChanged="SelectionChanged"
                AllowDrop="True"
                DragItemsStarting="RootListView_DragItemsStarting"
                Drop="DragDropped"
                Header="{Binding Header}"
                HeaderTemplate="{Binding HeaderTemplate}"
                ItemsPanel="{Binding ItemsPanel}" 
                Background="{Binding ActualBackground}"
                ItemsSource="{Binding ItemsSource}"
                Foreground="{Binding ActualForeground}"
                BorderThickness="{Binding ActualBorderThickness}"
                BorderBrush="{Binding ActualBorderBrush}"
                ItemTemplate="{Binding ItemTemplate}"
                ItemContainerStyle="{StaticResource ListViewItemStyleAllSubjects}"
                >
        </ListView>
    </UserControl>

    I am applying ItemContainerStyle as StaticResource. Whereas, other templates can be modified.

    Since, I don't know how to expose properties of ListView inside UserControl to actual page where control is used, I make DependancyProperties in UserControl and bind ListView (whose DataContext is set to UserControl) properties to those properties (Feel free to give suggestion about that).These dependancy properties are like that:

    public object ItemsSource
    {
                get { return (object)GetValue(ItemsSourceProperty); }
                set { SetValue(ItemsSourceProperty, value); }
    }
    
            // Using a DependencyProperty as the backing store for ItemsSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ItemsSourceProperty =
                DependencyProperty.Register("ItemsSource", typeof(object), typeof(CustomListView), new PropertyMetadata(null));

    I wanted to make control such that its template can be changed from where it is used.So, I also bind listview template properties to User Defined Dependancy properties of UserControl like above.

    Now, I am using this UserControl like this:

    <Controls:CustomListView x:Name="allSubjectsList" 
                                     Margin="266,141,0,0" 
                                     Height="346" 
                                     Width="425" 
                                     VerticalAlignment="Top" 
                                     HorizontalAlignment="Left"
                                     AllowDrop="True"
                                     Header="{Binding AllSubjectsHeader}" 
                                     ItemsSource="{Binding AvailibleSubjects}"
                                     BorderBrush="Red"
                                     BorderThickness="10"
                                     ItemsPanel="{StaticResource ItemsPanelTemplateAllSubjects}"
                                     ItemTemplate="{StaticResource AllSubjectsItemTemplate}"
                                     HeaderTemplate="{StaticResource AllSubjectsHeaderTemplate}" ActualBackground="#FF1D2E42" ActualBorderBrush="#FF575757" ActualBorderThickness="1"
                                     >
    </Controls:CustomListView>

    DataContext of above CustomListView is set to page (page implements INotifyPropertyChanged) containing it. DataTemplate for listview inside CustomListView is applied at CustomListView and it gets applied to inner ListView through binding.

    UISubject is like this:

    public class UISubject : INotifyPropertyChanged
    {
            bool isChecked;
    
            public bool IsChecked
            { 
                get
                {
                    return isChecked;
                }
                set
                {
                    isChecked = value;
                    NotifyChange("IsChecked");
                }
            }
    
            public float CreditHours { get; set; }
            public String Code { get; set; }
            public SubjectType SubType { get; set; }
            public Section SelectedSection { get; set; }
            public ObservableCollection<Section> Sections { get; set; }
            public String SubjectName{get;set;}
           ....
    
    }

    The property AvailibleSubjects is as follow:

    public ObservableCollection<UISubject> AvailibleSubjects
    {
                get 
                {
                    try
                    {
                        return driver.ActiveDepartment.Subjects; 
                    }
                    catch
                    {
                        return null;
                    }
                }
    }

    Monday, June 16, 2014 8:30 PM
  • I still don't understand what you are trying to do or where this is not working. Can you share a minimum repro demonstrating what you are doing to your OneDrive, along with a clear explanation of expected results and how they differ from actual results.

    Thursday, June 26, 2014 8:25 PM
    Owner
  • I still don't understand what you are trying to do or where this is not working. Can you share a minimum repro demonstrating what you are doing to your OneDrive, along with a clear explanation of expected results and how they differ from actual results.

    My apologies for being vague.

    I hope that this time I will be able to help you understand my problem.

    I wanted to develop CustomListView which similar to listview below Inbox in mail app and like that listview I want to make some tools visible when user hover over a ListViewItem like when we hover over a mail in listview of mail app tools like "Delete","Flag","Mark read/unread" become visible and instead of mail subject I want to display content of my itemstemplate.

    Now, to do this, I am doing things like that (however, I am not sure if it is correct way or not).

    My CustomListView xaml is like this:

    <UserControl
        x:Class="CustomControls.CustomListView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:CustomControls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
    
        <UserControl.Resources>
    
            <Style x:Key="ListViewItemStyleAllSubjects" TargetType="ListViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Margin" Value="0,0,18,2"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" ContentMargin="2" ContentTransitions="{TemplateBinding ContentTransitions}" CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" >
                                <StackPanel Height="100" Width="398" Orientation="Horizontal">
                                    <ContentPresenter Width="318" />
                                     Markup of tools which I want to be visible on hovering over ListViewItem 
                                </StackPanel>
                            </ListViewItemPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
        </UserControl.Resources>
    
        <ListView x:Name="RootListView"
                SelectionMode="Extended"
                CanDragItems="True"
                SelectionChanged="SelectionChanged"
                AllowDrop="True"
                DragItemsStarting="RootListView_DragItemsStarting"
                Drop="DragDropped"
                Header="{Binding Header}"
                HeaderTemplate="{Binding HeaderTemplate}"
                ItemsPanel="{Binding ItemsPanel}" 
                Background="{Binding ActualBackground}"
                ItemsSource="{Binding ItemsSource}"
                Foreground="{Binding ActualForeground}"
                BorderThickness="{Binding ActualBorderThickness}"
                BorderBrush="{Binding ActualBorderBrush}"
                ItemTemplate="{Binding ItemTemplate}"
                ItemContainerStyle="{StaticResource ListViewItemStyleAllSubjects}" ContainerContentChanging="ItemsChanged"
                >
        </ListView>
    </UserControl>

    As, described earlier the binding on "RootListView" is to expose its properties to user of CustomControl. The datacontext of "RootListView" is set to CustomListView which contains it. (If there is better and easy way, kindly mention it).

    (Below paragraph is written assuming that if I set ItemsSource of ListView it will reach to controls defined in itemstemplate of listview in this way ListViewItemPresenter->StackPanel->ContentPresenter->[Controls in itemtemplate applied to listview] and these controls will become children of ContentPresenter in end.)

    Since, ControlTemplate can handle hover changes, so I think it would be good to place tools which I want to become visible on hovering in ControlTemplate inside ListViewItemPresenter (as written in above mark up) and if my above assumption is correct then my DataTemplate controls will be visible like mail subject.

    I am using this in page as

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:TimeTable_c_sharp"
          xmlns:Controls="using:CustomControls"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:ProjectClasses="using:ProjectClasses"
          xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
          x:Class="TimeTable_c_sharp.MainPage"
          mc:Ignorable="d">
    
        <Page.Resources>
            <DataTemplate x:Key="AllSubjectsHeaderTemplate">
                <Border BorderBrush="#FF677E7B"
                        BorderThickness="0,0,0,1"
                        Background="#FF534C4C">
                    <StackPanel Orientation="Horizontal">
                        <CheckBox x:Name="checkBox"
                                  HorizontalAlignment="Left"
                                  Margin="10"
                                  VerticalAlignment="Top"
                                  IsChecked="{Binding IsChecked, Mode=TwoWay}"
                                  Width="27" />
    
                        <TextBlock Grid.Column="1"
                                   TextAlignment="Center"
                                   Text="{Binding Content.Column1, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                   Margin="22,10,0,0"
                                   TextWrapping="Wrap"
                                   FontStyle="Normal"
                                   FontWeight="Bold"
                                   FontSize="18"
                                   VerticalAlignment="Top"
                                   Width="298"
                                   Height="24"
                                   x:Name="Header1"
                                   Foreground="#FFB2BF8F" />
                    </StackPanel>
                </Border>
            </DataTemplate>
    
            <DataTemplate  x:Key="AllSubjectsItemTemplate">
                <StackPanel Orientation="Horizontal"
                            d:DesignWidth="434.5">
    
                    <CheckBox x:Name="checkBox"
                              HorizontalAlignment="Left"
                              Margin="10"
                              VerticalAlignment="Top"
                              Controls:CustomListViewCheckChangedCommand.ItemCheckChanged="RandomTextSoEventsGetAttached"
                              IsChecked="{Binding IsChecked, Mode=TwoWay}"
                              Width="auto" />
    
                    <TextBlock Grid.Column="1"
                               Text="{Binding SubjectName}"
                               TextWrapping="WrapWholeWords"
                               Margin="10"
                               VerticalAlignment="Top"
                               Width="350"
                               Height="auto"
                               IsTapEnabled="False"
                               IsRightTapEnabled="False"
                               IsHoldingEnabled="False"
                               IsHitTestVisible="False"
                               IsDoubleTapEnabled="False"
                               IsColorFontEnabled="True" />
                </StackPanel>
            </DataTemplate>
        </Page.Resources>
    
        <Grid Background="#FF271D1D">
            <Controls:CustomListView x:Name="allSubjectsList"
                                     Margin="266,141,0,0"
                                     Height="346"
                                     Width="425"
                                     VerticalAlignment="Top"
                                     HorizontalAlignment="Left"
                                     AllowDrop="True"
                                     Header="{Binding AllSubjectsHeader}"
                                     ItemsSource="{Binding AvailibleSubjects}"
                                     BorderBrush="Red"
                                     BorderThickness="10"
                                     ItemTemplate="{StaticResource AllSubjectsItemTemplate}"
                                     HeaderTemplate="{StaticResource AllSubjectsHeaderTemplate}"
                                     ActualBackground="#FF1D2E42"
                                     ActualBorderBrush="#FF575757"
                                     ActualBorderThickness="1"
                                     Visibility="Visible">
            </Controls:CustomListView>
        </Grid>
    </Page>
    Here, the datacontext of "allSubjectsList" is set to page containing it.This page has properties "Availible Subjects" which is shown in previous post and "AllSubjectHeader" which just return a string wrapped in a class.

    Now, when I run application with this code, nothing is displayed in CustomListView->RootListView except 2 checkboxes (2 because AvailibleSubjects has to items) which are defined in items template,but other controls from itemstemplate are not there.


    • Edited by Talha.Ahmed Saturday, June 28, 2014 1:13 PM
    Saturday, June 28, 2014 1:09 PM
  • Can you share a minimum repro demonstrating what you are doing to your OneDrive, along with a clear explanation of expected results and how they differ from actual results.
    Monday, July 7, 2014 10:13 PM
    Owner