Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. General Programming
  3. WPF
  4. Using a Grid as an ItemsPanel

Using a Grid as an ItemsPanel

Scheduled Pinned Locked Moved WPF
csswpfwcftutorialquestion
18 Posts 2 Posters 48 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Pete OHanlon

    Ed - sorry I haven't got round to looking at this before, but wouldn't a StackPanel with it's Orientation set to Horizontal do the job?

    Deja View - the feeling that you've seen this post before.

    My blog | My articles

    E Offline
    E Offline
    Ed Poore
    wrote on last edited by
    #3

    Nope, sorry.  What I'm actually trying to do is create a schedule-like component (think Outlook week view).  If you imagine the following class which stores the "Event information:

    public class Event
    {
        public string Summary { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
    }

    Then the following XAML:

    <ListBox ItemsSource="{StaticResource Events}">
        <ListBox.ItemTemplate>
           <StackPanel
                Grid.Row="{Binding Path=Start, Converter={StaticResource HourToRowConverter}}"
                Grid.Column="{Binding Path=Start, Converter={StaticResource DayToColumnConverter}}"
              Grid.RowSpan="{Binding Converter={StaticResource DurationToRowSpanConverter}}">
          <TextBlock Text="{Binding Path=Summary}" />
              <!-- Other stuff -->
           </StackPanel>
        </ListBox>
        <ListBox.ItemsPanel>
           <!-- Grid Goes here -->
        </ListBox.ItemsPanel>
    </ListBox>

    Hope that makes things a bit clearer, to be honest I was surprised when it didn't work but maybe it's something to do with the Grid.Row etc being an attached property?  The UniformGrid works but I think that's something to do with the fact that you can just set the rows and columns and add children controls and they're each added to a cell in the order in which they appear in the XAML, whereas this does not happen with the normal Grid. I'd really appreciate not having to go off and write a custom control just to manage what seemingly seems so simple. :rolleyes:

    P 2 Replies Last reply
    0
    • E Ed Poore

      Nope, sorry.  What I'm actually trying to do is create a schedule-like component (think Outlook week view).  If you imagine the following class which stores the "Event information:

      public class Event
      {
          public string Summary { get; set; }
          public DateTime Start { get; set; }
          public DateTime End { get; set; }
      }

      Then the following XAML:

      <ListBox ItemsSource="{StaticResource Events}">
          <ListBox.ItemTemplate>
             <StackPanel
                  Grid.Row="{Binding Path=Start, Converter={StaticResource HourToRowConverter}}"
                  Grid.Column="{Binding Path=Start, Converter={StaticResource DayToColumnConverter}}"
                Grid.RowSpan="{Binding Converter={StaticResource DurationToRowSpanConverter}}">
            <TextBlock Text="{Binding Path=Summary}" />
                <!-- Other stuff -->
             </StackPanel>
          </ListBox>
          <ListBox.ItemsPanel>
             <!-- Grid Goes here -->
          </ListBox.ItemsPanel>
      </ListBox>

      Hope that makes things a bit clearer, to be honest I was surprised when it didn't work but maybe it's something to do with the Grid.Row etc being an attached property?  The UniformGrid works but I think that's something to do with the fact that you can just set the rows and columns and add children controls and they're each added to a cell in the order in which they appear in the XAML, whereas this does not happen with the normal Grid. I'd really appreciate not having to go off and write a custom control just to manage what seemingly seems so simple. :rolleyes:

      P Offline
      P Offline
      Pete OHanlon
      wrote on last edited by
      #4

      Ed. I'm off for the weekend now, but I'll try to knock something together early on next week for you if that's OK with you. Pete

      Deja View - the feeling that you've seen this post before.

      My blog | My articles

      E 1 Reply Last reply
      0
      • P Pete OHanlon

        Ed. I'm off for the weekend now, but I'll try to knock something together early on next week for you if that's OK with you. Pete

        Deja View - the feeling that you've seen this post before.

        My blog | My articles

        E Offline
        E Offline
        Ed Poore
        wrote on last edited by
        #5

        Thanks, that'd be great, I'm not planning on doing anything on it over the weekend apart from go to a shoot tomorrow and then being re-wiring my Land Rover on Sunday. To give you a bit more perspective on it, apart from learning what I had thought it'd be useful for would be something involved: WPF, LINQ, Visual Studio Tools for Office and plain old C#.  I was thinking off getting an add-in for Outlook (or perhaps a service / tray app of some kind) to pull off by calendar from Outlook / Google Calendar (they're synced), use LINQ to select the current week (because it's so easy with that thing) and then use WPF to layout a view of the week like in outlook.  Capture that to an image, do some fancy alpha blending with a background image and then set that as my desktop background. Ambitious I know but hey :rolleyes:, might be useful to someone else, would be interesting articles if I get the time. I had thought of just using GDI+ for the rendering but when I came across a blog entry that said the Calendar Printing Assistant for Outlook uses WPF I thought what a good idea, much nicer for rendering it than loads of tedious calculations.

        1 Reply Last reply
        0
        • E Ed Poore

          Nope, sorry.  What I'm actually trying to do is create a schedule-like component (think Outlook week view).  If you imagine the following class which stores the "Event information:

          public class Event
          {
              public string Summary { get; set; }
              public DateTime Start { get; set; }
              public DateTime End { get; set; }
          }

          Then the following XAML:

          <ListBox ItemsSource="{StaticResource Events}">
              <ListBox.ItemTemplate>
                 <StackPanel
                      Grid.Row="{Binding Path=Start, Converter={StaticResource HourToRowConverter}}"
                      Grid.Column="{Binding Path=Start, Converter={StaticResource DayToColumnConverter}}"
                    Grid.RowSpan="{Binding Converter={StaticResource DurationToRowSpanConverter}}">
                <TextBlock Text="{Binding Path=Summary}" />
                    <!-- Other stuff -->
                 </StackPanel>
              </ListBox>
              <ListBox.ItemsPanel>
                 <!-- Grid Goes here -->
              </ListBox.ItemsPanel>
          </ListBox>

          Hope that makes things a bit clearer, to be honest I was surprised when it didn't work but maybe it's something to do with the Grid.Row etc being an attached property?  The UniformGrid works but I think that's something to do with the fact that you can just set the rows and columns and add children controls and they're each added to a cell in the order in which they appear in the XAML, whereas this does not happen with the normal Grid. I'd really appreciate not having to go off and write a custom control just to manage what seemingly seems so simple. :rolleyes:

          P Offline
          P Offline
          Pete OHanlon
          wrote on last edited by
          #6

          Have a look at this:

          <Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d"
          x:Class="OutlookWeekView.Window1"
          x:Name="Window"
          Title="Window1"
          Width="640" Height="480" Activated="Window_Activated">

          <Window.Resources>
          <XmlDataProvider x:Key="SummaryData" d:IsDataSource="True"
          Source="D:\wpf\OutlookWeekView\Events.xml"/>
          <DataTemplate x:Key="EventTemplate">
          <Grid>
          <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          </Grid.RowDefinitions>
          <TextBlock Padding="2"
          Grid.Column="1"
          Grid.RowSpan="2"
          Text="{Binding Mode=OneWay, XPath=Summary}"/>
          <TextBlock Grid.Row="0" Padding="2"
          Grid.Column="0" Text="{Binding Mode=OneWay, XPath=Start}"/>
          <TextBlock Grid.Row="1" Padding="2"
          Grid.Column="0" Text="{Binding Mode=OneWay, XPath=End}"/>
          </Grid>
          </DataTemplate>
          </Window.Resources>

          <Grid x:Name="LayoutRoot">
          <ListBox ItemTemplate="{DynamicResource EventTemplate}"
          ItemsSource="{Binding Mode=Default,
          Source={StaticResource SummaryData},
          XPath=/Events/Event}"/>
          </Grid>
          </Window>

          Does it help in any way?

          Deja View - the feeling that you've seen this post before.

          My blog | My articles

          E 1 Reply Last reply
          0
          • P Pete OHanlon

            Have a look at this:

            <Window
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            x:Class="OutlookWeekView.Window1"
            x:Name="Window"
            Title="Window1"
            Width="640" Height="480" Activated="Window_Activated">

            <Window.Resources>
            <XmlDataProvider x:Key="SummaryData" d:IsDataSource="True"
            Source="D:\wpf\OutlookWeekView\Events.xml"/>
            <DataTemplate x:Key="EventTemplate">
            <Grid>
            <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Padding="2"
            Grid.Column="1"
            Grid.RowSpan="2"
            Text="{Binding Mode=OneWay, XPath=Summary}"/>
            <TextBlock Grid.Row="0" Padding="2"
            Grid.Column="0" Text="{Binding Mode=OneWay, XPath=Start}"/>
            <TextBlock Grid.Row="1" Padding="2"
            Grid.Column="0" Text="{Binding Mode=OneWay, XPath=End}"/>
            </Grid>
            </DataTemplate>
            </Window.Resources>

            <Grid x:Name="LayoutRoot">
            <ListBox ItemTemplate="{DynamicResource EventTemplate}"
            ItemsSource="{Binding Mode=Default,
            Source={StaticResource SummaryData},
            XPath=/Events/Event}"/>
            </Grid>
            </Window>

            Does it help in any way?

            Deja View - the feeling that you've seen this post before.

            My blog | My articles

            E Offline
            E Offline
            Ed Poore
            wrote on last edited by
            #7

            I don't think I explained it well enough, what you've got works fine so to speak, if you set the Grid.Row and Grid.Column of the TextBlocks (in this instance) explicitly then it does arrange them in the appropriate "cell".  However if you try and set them through binding then it doesn't work. E.g.

            <TextBlock Grid.Row="{Binding Path=Start,Converter={StaticResource DateToRowConverter}}"
                            Grid.Col="{Binding Path=Start,Converter={StaticResource DateToColConverter}}" Text="{Binding Path=Summary}" />

            Where DateToRowConverter returns say the hour of the event and the DateToColConverter returns the day of week. (Sorry hit the wrong key so you won't get the full post).

            P 2 Replies Last reply
            0
            • E Ed Poore

              I don't think I explained it well enough, what you've got works fine so to speak, if you set the Grid.Row and Grid.Column of the TextBlocks (in this instance) explicitly then it does arrange them in the appropriate "cell".  However if you try and set them through binding then it doesn't work. E.g.

              <TextBlock Grid.Row="{Binding Path=Start,Converter={StaticResource DateToRowConverter}}"
                              Grid.Col="{Binding Path=Start,Converter={StaticResource DateToColConverter}}" Text="{Binding Path=Summary}" />

              Where DateToRowConverter returns say the hour of the event and the DateToColConverter returns the day of week. (Sorry hit the wrong key so you won't get the full post).

              P Offline
              P Offline
              Pete OHanlon
              wrote on last edited by
              #8

              Sorry - I get it now (to quote American teens, "My bad"). OK - this is a more complicated issue and one that I can't see off the top of my head how you'd accomplish this. Potentially you could do this by setting the Grid.Row and Grid.Column in the converters.

              Deja View - the feeling that you've seen this post before.

              My blog | My articles

              E 1 Reply Last reply
              0
              • P Pete OHanlon

                Sorry - I get it now (to quote American teens, "My bad"). OK - this is a more complicated issue and one that I can't see off the top of my head how you'd accomplish this. Potentially you could do this by setting the Grid.Row and Grid.Column in the converters.

                Deja View - the feeling that you've seen this post before.

                My blog | My articles

                E Offline
                E Offline
                Ed Poore
                wrote on last edited by
                #9

                Pete O'Hanlon wrote:

                Potentially you could do this by setting the Grid.Row and Grid.Column in the converters.

                Hadn't thought of it that way.  Any idea why it doesn't work with a "normal" binding expression?  Perhaps it's time to dig out Reflector...

                1 Reply Last reply
                0
                • E Ed Poore

                  I don't think I explained it well enough, what you've got works fine so to speak, if you set the Grid.Row and Grid.Column of the TextBlocks (in this instance) explicitly then it does arrange them in the appropriate "cell".  However if you try and set them through binding then it doesn't work. E.g.

                  <TextBlock Grid.Row="{Binding Path=Start,Converter={StaticResource DateToRowConverter}}"
                                  Grid.Col="{Binding Path=Start,Converter={StaticResource DateToColConverter}}" Text="{Binding Path=Summary}" />

                  Where DateToRowConverter returns say the hour of the event and the DateToColConverter returns the day of week. (Sorry hit the wrong key so you won't get the full post).

                  P Offline
                  P Offline
                  Pete OHanlon
                  wrote on last edited by
                  #10

                  The problem that you have is that you are returning the wrong type of value here. I've just been playing around with a sample of this, and here's a converter sample that you might want to take a look at:

                  [ValueConversion(typeof(DateTime), typeof(int))]
                  public class ColDateFormatter : IValueConverter
                  {
                  #region IValueConverter Members

                  public object Convert(object value, Type targetType, 
                      object parameter, System.Globalization.CultureInfo culture)
                  {
                      DateTime startDate = DateTime.Today; // This is just a test to get a date to compare to.
                      TimeSpan off = startDate.Subtract(DateTime.Parse(value as string));
                  
                      return off.Days + 1;
                  }
                  
                  public object ConvertBack(object value, Type targetType, object parameter,
                      System.Globalization.CultureInfo culture)
                  {
                      throw new NotImplementedException();
                  }
                  
                  #endregion
                  

                  }

                  Here's a sample of the XAML that you'll need:

                  <TextBlock Grid.Row="0" Padding="2"
                  Grid.Column="{Binding XPath=Start, Converter={StaticResource ColDateFormatter}}"
                  Text="{Binding Mode=OneWay, XPath=Start, Converter={StaticResource Formatter}, ConverterParameter='dd-MMM-yy'}"/>

                  Obviously, you'll need to have added an appropriate number of RowDefinition and ColumnDefinition items. Hmmm. I'm almost tempted to turn this into an article. :-D

                  Deja View - the feeling that you've seen this post before.

                  My blog | My articles

                  E 1 Reply Last reply
                  0
                  • P Pete OHanlon

                    The problem that you have is that you are returning the wrong type of value here. I've just been playing around with a sample of this, and here's a converter sample that you might want to take a look at:

                    [ValueConversion(typeof(DateTime), typeof(int))]
                    public class ColDateFormatter : IValueConverter
                    {
                    #region IValueConverter Members

                    public object Convert(object value, Type targetType, 
                        object parameter, System.Globalization.CultureInfo culture)
                    {
                        DateTime startDate = DateTime.Today; // This is just a test to get a date to compare to.
                        TimeSpan off = startDate.Subtract(DateTime.Parse(value as string));
                    
                        return off.Days + 1;
                    }
                    
                    public object ConvertBack(object value, Type targetType, object parameter,
                        System.Globalization.CultureInfo culture)
                    {
                        throw new NotImplementedException();
                    }
                    
                    #endregion
                    

                    }

                    Here's a sample of the XAML that you'll need:

                    <TextBlock Grid.Row="0" Padding="2"
                    Grid.Column="{Binding XPath=Start, Converter={StaticResource ColDateFormatter}}"
                    Text="{Binding Mode=OneWay, XPath=Start, Converter={StaticResource Formatter}, ConverterParameter='dd-MMM-yy'}"/>

                    Obviously, you'll need to have added an appropriate number of RowDefinition and ColumnDefinition items. Hmmm. I'm almost tempted to turn this into an article. :-D

                    Deja View - the feeling that you've seen this post before.

                    My blog | My articles

                    E Offline
                    E Offline
                    Ed Poore
                    wrote on last edited by
                    #11

                    Pete O'Hanlon wrote:

                    The problem that you have is that you are returning the wrong type of value here

                    My converter was constructed as such:

                    public class DateToRowConverter : IValueConverter
                    {
                        public object ConvertTo(object value, Type targetType, object parameter, CultureInfo culture)
                        {
                           // No checking for simplicity
                           return ((DateTime)value).Hour - 8; // Grid starts at 08:00 for example so this provides the necessary offset
                        }
                    // Rest of class...
                    }

                    I didn't have those attributes so perhaps that was what was missing. I'll see if I can get a sample project made up for you to illustrate the point...

                    P 1 Reply Last reply
                    0
                    • E Ed Poore

                      Pete O'Hanlon wrote:

                      The problem that you have is that you are returning the wrong type of value here

                      My converter was constructed as such:

                      public class DateToRowConverter : IValueConverter
                      {
                          public object ConvertTo(object value, Type targetType, object parameter, CultureInfo culture)
                          {
                             // No checking for simplicity
                             return ((DateTime)value).Hour - 8; // Grid starts at 08:00 for example so this provides the necessary offset
                          }
                      // Rest of class...
                      }

                      I didn't have those attributes so perhaps that was what was missing. I'll see if I can get a sample project made up for you to illustrate the point...

                      P Offline
                      P Offline
                      Pete OHanlon
                      wrote on last edited by
                      #12

                      And do you have enough RowDefinition and ColumnDefinition items in the XAML? This is important.

                      Deja View - the feeling that you've seen this post before.

                      My blog | My articles

                      E 2 Replies Last reply
                      0
                      • P Pete OHanlon

                        And do you have enough RowDefinition and ColumnDefinition items in the XAML? This is important.

                        Deja View - the feeling that you've seen this post before.

                        My blog | My articles

                        E Offline
                        E Offline
                        Ed Poore
                        wrote on last edited by
                        #13

                        Yep.  Check out a quick project I've put together here[^]. [edit] Seems I can't add TextBlocks for rows and column headers either if I'm using it as an ItemsPanel.  Makes sense, perhaps I need to do something with the ItemsPresenter? [/edit]

                        1 Reply Last reply
                        0
                        • P Pete OHanlon

                          And do you have enough RowDefinition and ColumnDefinition items in the XAML? This is important.

                          Deja View - the feeling that you've seen this post before.

                          My blog | My articles

                          E Offline
                          E Offline
                          Ed Poore
                          wrote on last edited by
                          #14

                          Sorted it out, ;P Thanks to someone on the WPF forum @ MSDN (god I miss the CP forums compared to those).  Basically everything I was doing was correct but didn't realise that the TextBlock / ItemTemplate is bound by a ListItem so you have to set the Grid.Row and Grid.Column from there.  E.g.

                          <Style TargetType="{x:Type ListItem}">
                            <Setter PropertyName="Grid.Row" Value="{Binding Path=Start, Converter={StaticResource DateToRowConverter}}" />
                            <Setter PropertyName="Grid.Column" Value="{Binding Path=Start, Converter={StaticResource DateToColConverter}}" />
                          </Style>

                          P 1 Reply Last reply
                          0
                          • E Ed Poore

                            Sorted it out, ;P Thanks to someone on the WPF forum @ MSDN (god I miss the CP forums compared to those).  Basically everything I was doing was correct but didn't realise that the TextBlock / ItemTemplate is bound by a ListItem so you have to set the Grid.Row and Grid.Column from there.  E.g.

                            <Style TargetType="{x:Type ListItem}">
                              <Setter PropertyName="Grid.Row" Value="{Binding Path=Start, Converter={StaticResource DateToRowConverter}}" />
                              <Setter PropertyName="Grid.Column" Value="{Binding Path=Start, Converter={StaticResource DateToColConverter}}" />
                            </Style>

                            P Offline
                            P Offline
                            Pete OHanlon
                            wrote on last edited by
                            #15

                            :doh: I should have realised that. Stoopid stoopid me.

                            Deja View - the feeling that you've seen this post before.

                            My blog | My articles

                            E 1 Reply Last reply
                            0
                            • P Pete OHanlon

                              :doh: I should have realised that. Stoopid stoopid me.

                              Deja View - the feeling that you've seen this post before.

                              My blog | My articles

                              E Offline
                              E Offline
                              Ed Poore
                              wrote on last edited by
                              #16

                              Ah well we all learn something (me particularly). You can see a screenshot of the "finished" WpfCalendar[^] and the corresponding outlook[^] calendars.


                              My Blog[^]

                              P 1 Reply Last reply
                              0
                              • E Ed Poore

                                Ah well we all learn something (me particularly). You can see a screenshot of the "finished" WpfCalendar[^] and the corresponding outlook[^] calendars.


                                My Blog[^]

                                P Offline
                                P Offline
                                Pete OHanlon
                                wrote on last edited by
                                #17

                                Very nice.

                                Deja View - the feeling that you've seen this post before.

                                My blog | My articles

                                E 1 Reply Last reply
                                0
                                • P Pete OHanlon

                                  Very nice.

                                  Deja View - the feeling that you've seen this post before.

                                  My blog | My articles

                                  E Offline
                                  E Offline
                                  Ed Poore
                                  wrote on last edited by
                                  #18

                                  Why thank you, pretty chuffed so far considering my design skills are non-existant... Now trying to sort out some issues with saving it to a bitmap.


                                  My Blog[^]

                                  1 Reply Last reply
                                  0
                                  Reply
                                  • Reply as topic
                                  Log in to reply
                                  • Oldest to Newest
                                  • Newest to Oldest
                                  • Most Votes


                                  • Login

                                  • Don't have an account? Register

                                  • Login or register to search.
                                  • First post
                                    Last post
                                  0
                                  • Categories
                                  • Recent
                                  • Tags
                                  • Popular
                                  • World
                                  • Users
                                  • Groups