locked
ItemsControl within ItemsControl RRS feed

  • Question

  • I'm creating an Outlook explorer type control with expanding panels that is dynamically built with data from the database.

    I use an ItemsControl to create the main panel headers which basically is a <border> with a <grid> inside and the <grid> contains the text and the expanding button etc.

    The <grid> also contains the panel contents which is another ItemsControl which contains a <border> with a <grid>.

    My problem is to populate the second ItemsControl. When in item in the first ItemsControl is clicked, I get the second ItemsControl by using (ItemsControl)panel.FindName("icMessengerStatusses") and the I set the DataContext property, however the ItemsControl doesn't databind.

    Is this possible?
    Monday, July 13, 2009 7:03 AM

Answers

  • -> Is this possible?

    Yes, it's possible, please write your model/data source class below, I could write the XAML and data binding code for you.

    Thanks
    Another Paradigm Shift! http://shevaspace.blogspot.com
    • Marked as answer by Hua Chen Monday, July 20, 2009 3:56 AM
    Monday, July 13, 2009 9:02 AM

All replies

  • -> Is this possible?

    Yes, it's possible, please write your model/data source class below, I could write the XAML and data binding code for you.

    Thanks
    Another Paradigm Shift! http://shevaspace.blogspot.com
    • Marked as answer by Hua Chen Monday, July 20, 2009 3:56 AM
    Monday, July 13, 2009 9:02 AM
  • This is the XAML code in the user control:

    <DockPanel VerticalAlignment="Stretch">
            <Grid VerticalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="3" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                
                <StackPanel  VerticalAlignment="Stretch" Grid.Column="0">
                    <ItemsControl x:Name="icTest" ItemsSource="{Binding}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid Tag="{Binding Value}" Cursor="Hand" MouseLeftButtonUp="Grid_MouseLeftButtonUp" Margin="10,0,10,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
    
                                    <Border Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Style="{StaticResource stSystemPanelHeader}">                           
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFDDEECF" Offset="0"/>
                                                <GradientStop Color="#FF057073" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="32" />
                                            </Grid.ColumnDefinitions>
                                            <TextBlock x:Name="txtText"                                            
                                                Margin="10,0,0,0"
    										    VerticalAlignment="Center" 
    										    HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#FF18550A" FontSize="14"                                            
                                                Grid.Column="0" Text="{Binding Text}" />
                                            <Image x:Name="imgColExpImage" Grid.Column="1" Source="{Binding ImageURL}">
                                            </Image>
                                        </Grid>                                  
                                    </Border>
                                    
                                    <Border x:Name="panelContent" Visibility="{Binding ContentVisibility}" Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" Height="Auto">
                                        <Border.Background>
                                            <SolidColorBrush Color="Red"></SolidColorBrush>
                                        </Border.Background>
                                        
                                        <StackPanel x:Name="spContent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                        </StackPanel>
                                    </Border>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
    
                <GridSplitter Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="3" VerticalAlignment="Stretch"/>
                
                <StackPanel Grid.Column="2">   
                    <TextBlock>Messages</TextBlock>
                </StackPanel>
            </Grid>
        </DockPanel>
    This is the code behind:

    namespace GBCore
    {
        public enum PanelStates
        {
            Expanded,
            Collapsed
        }
    
        /// <summary>
        /// Interaction logic for ctrlNotifications.xaml
        /// </summary>
        public partial class ctlNotifications : UserControl
        {
            private List<UISystemPanelHeader> _data = new List<UISystemPanelHeader>();
            private List<UIMessengerStatus> _messengerStatusses = new List<UIMessengerStatus>();
    
            public ctlNotifications()
            {
                InitializeComponent();
    
                _data = GetSystemsUI();
                icTest.DataContext = _data;
            }
    
            private List<UIMessengerStatus> GetMessengerStatusUI()
            {
                List<UIMessengerStatus> result = new List<UIMessengerStatus>();
                foreach (DataRow dr in TempDAL.GetMessengerStatusses().Rows)
                {
                    UIMessengerStatus newUI = new UIMessengerStatus();
                    newUI.MessagengerStatus = dr["sMessengerStatus"].ToString();
                    result.Add(newUI);
                }
                return result;
            }
    
            private List<UISystemPanelHeader> GetSystemsUI()
            {
                List<UISystemPanelHeader> result = new List<UISystemPanelHeader>();
                foreach (DataRow dr in TempDAL.GetSystems().Rows)
                {
                    UISystemPanelHeader newPanel = new UISystemPanelHeader();
                    newPanel.Text = dr["sSystemName"].ToString();
                    newPanel.Value = dr["pkiSystemID"].ToString();
                    newPanel.ThisObject = newPanel;
                    result.Add(newPanel);
                }            
                return result;
            }
    
            private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                Grid panel = (Grid)sender;
                UISystemPanelHeader theObject = _data.Find(x => x.Value == (string)panel.Tag);
                theObject.InvertPanelState();
    
                if (theObject.PanelState == PanelStates.Expanded)
                {
                    StackPanel panelContent = (StackPanel)panel.FindName("spContent");
                    panelContent.Children.Clear();
                    foreach (UIMessengerStatus m in GetMessengerStatusUI())
                    {
                        TextBlock t = new TextBlock();
                        t.Text = m.Text;
                        panelContent.Children.Add(t);
                    }
                }
    
                icTest.DataContext = null;
                icTest.DataContext = _data;
            }
    
        }
    
        [Serializable()]
        public class UISystemPanelHeader : UIPanelHeader
        {
            public UISystemPanelHeader ThisObject;
    
            public UISystemPanelHeader()
                : base()
            {
            }
    
            public UISystemPanelHeader(PanelStates state)
                : base(state)
            {
            }
    
            //public UISystemPanelHeader(Grid UIControl)
            //    : base()
            //{
    
            //}
        }
    
        [Serializable()]
        public class UIPanelHeader
        {
            private PanelStates _state;
            private string _imageURL;
    
            public string Text { get; set; }
            public string Value { get; set; }
            public string ExpandedImageURL { get; set; }
            public string CollapsedImageURL { get; set; }
            public Visibility ContentVisibility
            {
                get
                {
                    if (_state == PanelStates.Collapsed) return Visibility.Collapsed;
                    else return Visibility.Visible;
                }
            }
    
            public string ImageURL
            {
                get
                {
                    return _imageURL;
                }
            }
    
            public PanelStates PanelState
            {
                get
                {
                    return _state;
                }
                set
                {
                    _state = value;
                    if (_state == PanelStates.Collapsed) _imageURL = this.CollapsedImageURL;
                    else
                    {
                        _imageURL = this.ExpandedImageURL;                    
                    }
                }
            }
    
            public UIPanelHeader()
            {
                this.CollapsedImageURL = "Images/DownRegular.png";
                this.ExpandedImageURL = "Images/UpRegular.png";
                this.PanelState = PanelStates.Collapsed;
            }
    
            public UIPanelHeader(PanelStates state)
            {
                this.CollapsedImageURL = "Images/DownRegular.png";
                this.ExpandedImageURL = "Images/UpRegular.png";
                this.PanelState = state;
            }
    
            public void InvertPanelState()
            {
                if (this.PanelState == PanelStates.Collapsed) this.PanelState = PanelStates.Expanded;
                else this.PanelState = PanelStates.Collapsed;
            }
        }
    
    
    
        public class UIMessengerStatus
        {
            private string _text = "";
            private string _messengerStatus = "";
    
            public string Text { get { return _text; } }
            public string MessagengerStatus { get { return _messengerStatus; } set { _messengerStatus = value; _text = _messengerStatus + " (" + this.MessageCount.ToString() + ")"; } }
            public bool Selected { get; set; }
            public int MessageCount { get; set; }
    
            public string UIStyle
            {
                get
                {
                    if (this.Selected) return "{StaticResource MessengerStatusSelected}";
                    else return "{StaticResource MessengerStatusUnselected}";
                }
            }
    
            public UIMessengerStatus()
            {
                this.Selected = false;
                this.MessageCount = 0;
            }
        }
    }
    
    Monday, July 13, 2009 9:52 AM
  • I think I need a fully working code to refactor, you could sent your project to me at footballism at gmail dot com. Note that please mock a fake DAL for me, since DAL is irrelevant here.

    Thanks
    Another Paradigm Shift! http://shevaspace.blogspot.com
    Monday, July 13, 2009 4:13 PM
  • I have sent you the project. Thank you.
    Tuesday, July 14, 2009 7:00 AM