locked
Custom Panel problem RRS feed

  • Question

  • Hello, I've created a custom panel control (pure C# code, no XAML) that extends the base Panel class.

    When I use this control in Blend I can add children in the Blend Designer and everything works fine.

    Now, I need to use the custom Panel within another user-control. Now the Blend designer doesn't recognize the

    containing panel and I cannot add any children to the new control.

    Can somebody help me, on how to add children to the user control containing the custom panel ?

     

    Best regards & thanks in advance

    Friday, August 27, 2010 1:26 PM

Answers

  • Here are the steps I took to generate the xaml/code pasted below:

    1. Created a class called MyCustonPanel.cs, which is just an empty class that derives from StackPanel, this represents your custom panel.

    2. I drew 3 random buttons on MainPage.xaml, selected them, picked make into usercontrol, this represents your children controls

    3. Created an ItemsControl on MainPage.xaml

    4. Copied and pasted 5 copies of MyUserControl into the ItemsTemplate, at this point they are displayed in the default StackPanel panel

    5. Right click the ItemsControl and select Edit Additional Template -> Edit Layout of Items -> Create Empty

    6. Now you are in template editing mode, in the objects panel you can see the default StackPanel. Remove it.

    7. Create an instance of your custom panel here (you might have to build if you haven't since you added your panel)

    8. In my case, it looks the same as before because my panel derives from StackPanel, go back to the main page by clicking ItemsControl in the breadcrumb bar (right under the documents tab)

    9. Your ItemsControl should now use your custom panel.

    Hope this helps, feel free to ask more questions if you need more help!

    MainPage.xaml:

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:local="clr-namespace:SilverlightApplication5"
    	x:Class="SilverlightApplication5.MainPage"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    			<local:MyCustomPanel x:Name="myCustomPanel"/>
    		</ItemsPanelTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<ItemsControl x:Name="itemsControl" Margin="50,43,303,131" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    		</ItemsControl>
    	</Grid>
    </UserControl>
    

    MyUserControl.xaml:

    <UserControl
    	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/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="SilverlightApplication5.MyUserControl"
    	d:DesignWidth="77" d:DesignHeight="59">
    
    	<Grid x:Name="LayoutRoot">
    		<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="26" VerticalAlignment="Top" Width="36"/>
    		<Button x:Name="button1" Content="Button" HorizontalAlignment="Right" Margin="0,26,0,20" Width="21"/>
    		<Button x:Name="button2" Content="Button" HorizontalAlignment="Left" Height="20" Margin="11,0,0,0" VerticalAlignment="Bottom" Width="25"/>
    	</Grid>
    </UserControl>
    

    MyCustomPanel.cs:

    using System;
    using System.Collections.Generic;
    using System.Text;
    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.Shapes;
    
    namespace SilverlightApplication5
    {
    	public class MyCustomPanel : StackPanel
    	{
    		public MyCustomPanel()
    		{
    			// Insert code required on object creation below this point.
    		}
    	}
    }
    

    Friday, August 27, 2010 2:33 PM
    Moderator

All replies

  • If I understand you correctly, you are trying to add children to a usercontrol?  That is not going to work unfortunately.

    Could you instead either extend a collection type of control like itemscontrol and replace the panel with your own?

    If you provide more info on what you are trying to accomplish we might be able to provide a better solution.

    Friday, August 27, 2010 1:43 PM
    Moderator
  • Yes, I trying to add children to a user control, example to make it clear:

     

    MyPanel.cs - My custom panel control.

    NicePanel.xaml - User control that contains MyPanel.cs

     

    Now I wanna use NicePanel.xaml and add children to it, the children of course should be placed in the containing MyPanel.

     

    If you have any ideas, how I can accomplish that, I would be glad to know ;-)

     

    Friday, August 27, 2010 1:51 PM
  • Here is a thread with some info:

    http://forums.silverlight.net/forums/p/33540/104509.aspx

     

    Unfortunately UserControl does not have a children property that you can add multiple items to so doing it that way is not going to work.

     

    Do you need to use this in many places?  Can you just create an itemscontrol with the items as children and replace the panel with yours?

    Friday, August 27, 2010 2:08 PM
    Moderator
  • Ok, thanks for the link.

    Just to clarify, there's no way of telling the User Control, that it should use the children property of the containing panel ?

    Can you give some hints on how to use the itemscontrol like you said.

     

    Thanks again.

     

     

     

     

     

     

    Friday, August 27, 2010 2:16 PM
  • Sure, are you using WPF or SL?  What are the children objects?
    Friday, August 27, 2010 2:19 PM
    Moderator
  • Sorry, missing infos.

    I'm using Silverlight, and the children are also custom user controls :-)

     

    Friday, August 27, 2010 2:22 PM
  • Here are the steps I took to generate the xaml/code pasted below:

    1. Created a class called MyCustonPanel.cs, which is just an empty class that derives from StackPanel, this represents your custom panel.

    2. I drew 3 random buttons on MainPage.xaml, selected them, picked make into usercontrol, this represents your children controls

    3. Created an ItemsControl on MainPage.xaml

    4. Copied and pasted 5 copies of MyUserControl into the ItemsTemplate, at this point they are displayed in the default StackPanel panel

    5. Right click the ItemsControl and select Edit Additional Template -> Edit Layout of Items -> Create Empty

    6. Now you are in template editing mode, in the objects panel you can see the default StackPanel. Remove it.

    7. Create an instance of your custom panel here (you might have to build if you haven't since you added your panel)

    8. In my case, it looks the same as before because my panel derives from StackPanel, go back to the main page by clicking ItemsControl in the breadcrumb bar (right under the documents tab)

    9. Your ItemsControl should now use your custom panel.

    Hope this helps, feel free to ask more questions if you need more help!

    MainPage.xaml:

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:local="clr-namespace:SilverlightApplication5"
    	x:Class="SilverlightApplication5.MainPage"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    			<local:MyCustomPanel x:Name="myCustomPanel"/>
    		</ItemsPanelTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<ItemsControl x:Name="itemsControl" Margin="50,43,303,131" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    			<local:MyUserControl HorizontalAlignment="Left" Height="59" Width="77"/>
    		</ItemsControl>
    	</Grid>
    </UserControl>
    

    MyUserControl.xaml:

    <UserControl
    	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/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="SilverlightApplication5.MyUserControl"
    	d:DesignWidth="77" d:DesignHeight="59">
    
    	<Grid x:Name="LayoutRoot">
    		<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="26" VerticalAlignment="Top" Width="36"/>
    		<Button x:Name="button1" Content="Button" HorizontalAlignment="Right" Margin="0,26,0,20" Width="21"/>
    		<Button x:Name="button2" Content="Button" HorizontalAlignment="Left" Height="20" Margin="11,0,0,0" VerticalAlignment="Bottom" Width="25"/>
    	</Grid>
    </UserControl>
    

    MyCustomPanel.cs:

    using System;
    using System.Collections.Generic;
    using System.Text;
    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.Shapes;
    
    namespace SilverlightApplication5
    {
    	public class MyCustomPanel : StackPanel
    	{
    		public MyCustomPanel()
    		{
    			// Insert code required on object creation below this point.
    		}
    	}
    }
    

    Friday, August 27, 2010 2:33 PM
    Moderator
  • Thanks Chuck, I'll try this way.
    Friday, August 27, 2010 6:40 PM