Show ListView content depending on datacontent

Apr 11, 2013 at 9:02 AM
I'd tried to show controls that will depend on data in ListView, e.g. text box or check box.
I tried to use ItemTemplateSelector and DataTemplates, but it doesn't work, while ModernUI.xaml was merged. When I disabled it, it started to work.

As source can be used sources from
http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector

The only modification was, that I added references to MUI and merged needed resources in App.xaml

Could somebody, please, help me how to proceed?

Thanks a lot ...
Coordinator
Apr 11, 2013 at 4:50 PM
Care to post the source? I haven't been able to reproduce.
Apr 12, 2013 at 9:39 AM
Sample app should show list of textboxes and checkboxes depending on data content (using DataTemplateSelector).
Reference to ModernUI 1.0.3 is added to project and related resources are merged in App.xaml.
The problem is, that it doesn't work, checkboxes/textboxes are not shown.
After removing / commenting of ModernUI resources, it works fine.

Here is source for test window:
<Window x:Class="DataTemplateSelectorExample.Window1"
    xmlns:mui="http://firstfloorsoftware.com/ModernUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:DataTemplateSelectorExample"
    Title="Data Template Selector Example" 
    Height="300" Width="300" Name="This">
  <Window.Resources>
    
    <DataTemplate x:Key="stringTemplate">
      <TextBlock Text="{Binding}" Background="Green"/>
    </DataTemplate>

    <DataTemplate x:Key="checkBoxTemplate">
      <CheckBox Content="{Binding}" Background="Red"/>
    </DataTemplate>
    
    <local:ImgStringTemplateSelector  
      CheckBoxTemplate="{StaticResource checkBoxTemplate}" 
      StringTemplate="{StaticResource stringTemplate}" 
      x:Key="imgStringTemplateSelector" />
  </Window.Resources>
  
  <Grid>
       <ListView ScrollViewer.CanContentScroll="False" 
        ItemsSource="{Binding}" 
        ItemTemplateSelector=
          "{StaticResource imgStringTemplateSelector}">
      </ListView>
  </Grid>
</Window>
CS part:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Collections.ObjectModel;
using System.Windows.Data;
using System.Globalization;

using FirstFloor.ModernUI.Windows.Controls;


namespace DataTemplateSelectorExample
{
  public partial class Window1 : Window
  {
    ObservableCollection<string> _PathCollection =
      new ObservableCollection<string>();


    public Window1()
    {
      _PathCollection.Add("Sunset.jpg");
      _PathCollection.Add("I'm not an image");
      _PathCollection.Add("Blue hills.jpg");
      _PathCollection.Add("Water lilies.jpg");
      _PathCollection.Add("More string action");
      _PathCollection.Add("Winter.jpg");

      InitializeComponent();

      this.DataContext = PathCollection;
    }

    public ObservableCollection<string> PathCollection
    { get { return _PathCollection; } }
  }

  public class ImgStringTemplateSelector : DataTemplateSelector
  {
    public DataTemplate CheckBoxTemplate { get; set; }
    public DataTemplate StringTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, 
      DependencyObject container)
    {
      String path = (string)item;
      String ext = System.IO.Path.GetExtension(path);
      if (System.IO.File.Exists(path) && ext == ".jpg")
        return CheckBoxTemplate;
      return StringTemplate;
    }
  }

}
App.xaml:
<Application x:Class="DataTemplateSelectorExample.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
        <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>
Coordinator
Apr 13, 2013 at 8:30 PM
Edited Apr 13, 2013 at 8:31 PM
You shouldn't set the Window.Content property in mui. You need to create a seperate page and load that page by setting the ModernWindow.ContentSource property. See also this tutorial.
Apr 22, 2013 at 10:14 AM
I crated another sample:

In sources of ModernUI demo App I created copy of Introduction page, renamed, corrected paths, anemspaces and links, so it worrks again correctly withpage added by me.
Then I put there sample mentioned above, but it still doesn't works ...

Here is code for TestIntroduction.xaml:
<UserControl x:Class="FirstFloor.ModernUI.App.Pages.TestIntroduction"
             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:mui="http://firstfloorsoftware.com/ModernUI"
             xmlns:local="clr-namespace:FirstFloor.ModernUI.App.Pages"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">

  <UserControl.Resources>

    <DataTemplate x:Key="stringTemplate">
      <TextBlock Text="{Binding}" Background="Beige"/>
    </DataTemplate>

    <DataTemplate x:Key="checkBoxTemplate">
      <CheckBox Content="{Binding}" Background="Green"/>
    </DataTemplate>

    <local:ImgStringTemplateSelector  
      CheckBoxTemplate="{StaticResource checkBoxTemplate}" 
      StringTemplate="{StaticResource stringTemplate}" 
      x:Key="imgStringTemplateSelector" />
  </UserControl.Resources>

  <Grid Style="{StaticResource ContentRoot}">
        <ScrollViewer>
            <StackPanel >

        <ListView ScrollViewer.CanContentScroll="False" 
        ItemsSource="{Binding}" 
        ItemTemplateSelector=
          "{StaticResource imgStringTemplateSelector}" >
        </ListView>

        <!-- ListView ScrollViewer.CanContentScroll="False" 
        ItemsSource="{Binding}"
        ItemTemplate="{StaticResource checkBoxTemplate}"
        >
        </ListView -->


      </StackPanel>
        </ScrollViewer>
    </Grid>
</UserControl>
Here is code for TestIntroduction.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


using System.Collections.ObjectModel;

namespace FirstFloor.ModernUI.App.Pages
{
    /// <summary>
    /// Interaction logic for Introduction.xaml
    /// </summary>
    public partial class TestIntroduction : UserControl
    {

          ObservableCollection<string> _PathCollection =
      new ObservableCollection<string>();

            public ObservableCollection<string> PathCollection
    { get { return _PathCollection; } }

      public TestIntroduction()
        {
      _PathCollection.Add("Sunset.jpg");
      _PathCollection.Add("I'm not an image");
      _PathCollection.Add("Blue hills.jpg");
      _PathCollection.Add("Water lilies.jpg");
      _PathCollection.Add("More string action");
      _PathCollection.Add("Winter.jpg");

      InitializeComponent();

      this.DataContext = PathCollection;
        }
    }

  public class ImgStringTemplateSelector : DataTemplateSelector
  {
    public DataTemplate CheckBoxTemplate { get; set; }
    public DataTemplate StringTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, 
      DependencyObject container)
    {
      String path = (string)item;
      String ext = System.IO.Path.GetExtension(path);
      if (System.IO.File.Exists(path) && ext == ".jpg")
        return CheckBoxTemplate;
      return StringTemplate;
    }
  }

}
Part of code from MainWindow.xaml:
    <mui:ModernWindow.MenuLinkGroups>
        <mui:LinkGroup DisplayName="Welcome">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Introduction" Source="/Pages/Introduction.xaml" />
                <mui:Link DisplayName="TestIntroduction" Source="/Pages/TestIntroduction.xaml" />
      </mui:LinkGroup.Links>
So, template selector doesn't work.
You can comment ListView with "imgStringTemplateSelector" and uncomment ListView below where only one template is used - this works correctly ...
Coordinator
Apr 23, 2013 at 10:39 PM
Yep, looks like an issue in the ListView style, not sure yet what is causing this. Your template selector does work in a ListBox though, is that an alternative for now?