locked
Sliding Panels RRS feed

  • Question

  • Hello,

    I am working in a SilverLight project where I have two panels that will have to slide from right to left and vice-versa

    Each panel is actually a Grid that are located in the main control LayoutRoot Grid.

    I was planning to add a SotoryBoard and change the margin properties of the these two grids so they produce a sliding effect.

    The problem is that as the control size may change, this panels must be streched on the layoutroot to support size changes. However, when I try to change teh margins of this controls to produce the sliding effect, they keep stucked on the layout root boundaries.

    If I change the Horizontal alignment in the storyboard, then I loose the transition effect.

    Is there any other approach I could use to perform this sliding effect?

    Thank you,

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Tuesday, April 24, 2012 6:00 PM

Answers

  • Hello Igor,

    I have been away for a bit so I am sorry for not responding to you.

    I have played with this a bit and come up with a possible start to a solution for you.

    I downloaded the test project to my SkyDrive:  https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!400&parid=513B70517E544EDB!131

    First of all I added a converter to the project that would turn a value into a negative number...

    using System;
    using System.Windows.Data;
    
    namespace SilverlightApplication3
    {
    	public class NegativeConverter : IValueConverter
    	{
    		#region IValueConverter Members
    
    		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			double a = Math.Round(System.Convert.ToDouble(value)) * -1;
    			return a.ToString();
    		}
    
    		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			throw new NotImplementedException();
    		}
    
    		#endregion
    	}
    }

    Then I set my project up like this...

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:SilverlightApplication3" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d" x:Name="userControl"
    	x:Class="SilverlightApplication3.MainPage" MinWidth="500" MinHeight="500">
    
    	<UserControl.Resources>
    		<local:NegativeConverter x:Key="NegativeConverter"/>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" SizeChanged="LayoutRoot_SizeChanged">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="0:0:3"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="State1">
    					<Storyboard>
    						<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid1" d:IsOptimized="True"/>
    						<DoubleAnimation Duration="0" To="{Binding Text, ElementName=WidthText}" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid2" d:IsOptimized="True"/>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="State2">
    					<Storyboard>
    						<DoubleAnimation Duration="0" To="{Binding Text, Converter={StaticResource NegativeConverter}, ElementName=WidthText, Mode=OneWay}" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid1" d:IsOptimized="True"/>
    						<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid2" d:IsOptimized="True"/>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<Grid x:Name="Grid1" Background="Red" RenderTransformOrigin="0.5,0.5">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ei:GoToStateAction StateName="State2"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<Grid.RenderTransform>
    				<CompositeTransform/>
    			</Grid.RenderTransform>
    		</Grid>
    		<Grid x:Name="Grid2" Background="Blue" RenderTransformOrigin="0.5,0.5">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<Grid.RenderTransform>
    				<CompositeTransform/>
    			</Grid.RenderTransform>
    		</Grid>
    		<TextBlock x:Name="WidthText" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="32" Loaded="WidthText_Loaded"/>
    	</Grid>
    </UserControl>

    I had to manually go in and alter the XAML of the 2 states I created.  State 1 slides grid2 to the right and State 2 slides Grid 1 to the left (which is where the negative converter comes in.)  See the bold lines above.

    The Code-Behind I used to update the width text...

    using System.Windows.Controls;
    
    namespace SilverlightApplication3
    {
    	public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			InitializeComponent();
    		}
    
    		private void WidthText_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			this.UpdateLayout();
    			this.WidthText.Text = this.ActualWidth.ToString();
    		}
    
    		private void LayoutRoot_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
    		{
    			this.UpdateLayout();
    			this.WidthText.Text = this.ActualWidth.ToString();
    		}
    	}
    }

    I used a textBlock because when I tried to bind to the actualWidth of the userControl it kept returning "0".  So as a work around I used the TextBlock method, however I am sure you could come up with a better solution.

    If you alter the states in the Blend UI at all you have to go back and manually reset the XAML for the binding.  It also gets a bit iffy at first when trying to resize the window.  You may have to resize grid1 and grid2 on the "sizeChanged method".

    In my sample clicking either grid will trigger it's respective state.

    I hope that gives you some ideas.

    Another solution may be to use a pathListBox with the 2 grids as children and have it slide.  I've not played with it but seeing the sliding action made me think a pathListBox could produce the same effect.

    ~Christine



    Friday, April 27, 2012 4:57 PM
  • Regarding Height and if you need the height to expand to the full height of the Accordion Item....

    I played with the Accordion templates and solved the height thing like this...

    1.  I put myProjectPanel into an AccordionItem

    2.  Right-Clicked the AccordionItem and selected Edit Template > Edit Copy

    3.  I selected the "ExpandSite" in the template... Right-Clicked … Edit Template > Edit A Copy

    4.  In the ExpandableContentControlStyle you'll notice they have the "ContentSite" Alignments set to Left and Top.  I reset these bindings for both vertical and horizontal and set them to Stretch.

    I'll upload the one with the templates to my SkyDrive so you can see what I'm talking about.

    ~Christine

    https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!402&parid=513B70517E544EDB!131

    P.S.  You actually don't need to put the control into an AccordionItem.  You could edit the Accordion template itself.  Just Edit the template and find the ExpandableSite, edit it's template and set the alignment from Left/Top to stretch.


    My Gallery



    Monday, April 30, 2012 11:37 PM

All replies

  • Hello Igor.

    I'm not always the sharpest tool in the shed, so I'm not sure I understand your goal totally, but would something like this work for you...

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media.Animation;
    
    namespace WpfApplication1
    {
    	public partial class MainWindow : Window
    	{
    		public MainWindow()
    		{
    			this.InitializeComponent();
    		}
    
    		private void Grid1_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    		{
    			DoubleAnimation da = new DoubleAnimation();
    			da.From = this.Grid1.ActualWidth;
    			da.To = this.LayoutRoot.ActualWidth - 100;
    			da.Duration = new Duration(TimeSpan.FromSeconds(3));
    			this.Grid1.BeginAnimation(Grid.WidthProperty, da);
    			
    			DoubleAnimation da2 = new DoubleAnimation();
    			da2.From = this.Grid2.ActualWidth;
    			da2.To = 100;
    			da2.Duration = new Duration(TimeSpan.FromSeconds(3));
    			this.Grid2.BeginAnimation(Grid.WidthProperty, da2);
    		}
    
    		private void Grid2_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    		{
    			DoubleAnimation da = new DoubleAnimation();
    			da.From = this.Grid1.ActualWidth;
    			da.To = 100;
    			da.Duration = new Duration(TimeSpan.FromSeconds(3));
    			this.Grid1.BeginAnimation(Grid.WidthProperty, da);
    			
    			DoubleAnimation da2 = new DoubleAnimation();
    			da2.From = this.Grid2.ActualWidth;
    			da2.To = this.LayoutRoot.ActualWidth - 100;
    			da2.Duration = new Duration(TimeSpan.FromSeconds(3));
    			this.Grid2.BeginAnimation(Grid.WidthProperty, da2);
    		}
    	}
    }

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication1.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot">
    		<DockPanel x:Name="DockPanel">
    			<Grid x:Name="Grid1" Margin="0" Background="Blue" MinWidth="100" MouseEnter="Grid1_MouseEnter"/>
    			<Grid x:Name="Grid2" Margin="0" Background="Red" MinWidth="100" MouseEnter="Grid2_MouseEnter"/>
    		</DockPanel>
    	</Grid>
    </Window>

    Although, it sounds like you may have already tried that.  Both Grids I set to Stretch.

    ~Christine

    Tuesday, April 24, 2012 7:43 PM
  • Hello Christine,

    Thank you for the reply, but:

    1 - I am working in a Silverlight Project. The sample you provide does not even compile con SL4. Still, I created a WPF project to try your idea.

    2 - I want to create a slidding effect where the panels move, like if they were translated from right to left and vice-versa. So changing its width will cause a different effect, don't you think so?

    3 - Penels must be completely hidden after transtioning. In you sample, they are acting more like an expander or accordion....

    Any suggestion?

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Wednesday, April 25, 2012 12:46 PM
  • For what you're trying to accomplish to save a lot of explanation I'd point you to these tutorials;

    http://www.windowspresentationfoundation.com/?p=910

    For a design instance I had to use (with a slightly different method) I also added an opacity mask that stepped-down with the slide animation that allowed the sliding panels to fade off into the sides while they slide instead of just sliding out of view but this should suffice for your requirements. You can also find a lot of good examples with a quick web search for "Sliding Panels Silverlight XAML"

    Hope this helps and best of luck!


    Check out the Gooroovster Windows Phone App! Also, please mark answers as helpful when used, and answered when completed.

    Thursday, April 26, 2012 3:55 PM
  • Hello,

    Thank you for the reply and for the links.

    It is on the details where my scenario is not acomplished for the examples I tried so far (including the one you mention).

    In my case the sliding will completely remove panels from the visible area. Besides, I dont know the size of the panels, since they are docked in a parent container... I was manipulation margins in my storyboards, but the problem arises due the fact the panels are streched to fit all possible area... and margin changes will not help in my case.

    In the example you mentioned, a Render Transform is used. This could be OK also, but not that as my panels are streched aligned, not matter how much I translate them of the clipping area, they will be still there... do you know what I mean?

    Thank you,

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Thursday, April 26, 2012 4:25 PM
  • Hello Igor,

    I have been away for a bit so I am sorry for not responding to you.

    I have played with this a bit and come up with a possible start to a solution for you.

    I downloaded the test project to my SkyDrive:  https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!400&parid=513B70517E544EDB!131

    First of all I added a converter to the project that would turn a value into a negative number...

    using System;
    using System.Windows.Data;
    
    namespace SilverlightApplication3
    {
    	public class NegativeConverter : IValueConverter
    	{
    		#region IValueConverter Members
    
    		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			double a = Math.Round(System.Convert.ToDouble(value)) * -1;
    			return a.ToString();
    		}
    
    		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    		{
    			throw new NotImplementedException();
    		}
    
    		#endregion
    	}
    }

    Then I set my project up like this...

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:SilverlightApplication3" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d" x:Name="userControl"
    	x:Class="SilverlightApplication3.MainPage" MinWidth="500" MinHeight="500">
    
    	<UserControl.Resources>
    		<local:NegativeConverter x:Key="NegativeConverter"/>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" SizeChanged="LayoutRoot_SizeChanged">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="0:0:3"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="State1">
    					<Storyboard>
    						<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid1" d:IsOptimized="True"/>
    						<DoubleAnimation Duration="0" To="{Binding Text, ElementName=WidthText}" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid2" d:IsOptimized="True"/>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="State2">
    					<Storyboard>
    						<DoubleAnimation Duration="0" To="{Binding Text, Converter={StaticResource NegativeConverter}, ElementName=WidthText, Mode=OneWay}" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid1" d:IsOptimized="True"/>
    						<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Grid2" d:IsOptimized="True"/>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<Grid x:Name="Grid1" Background="Red" RenderTransformOrigin="0.5,0.5">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ei:GoToStateAction StateName="State2"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<Grid.RenderTransform>
    				<CompositeTransform/>
    			</Grid.RenderTransform>
    		</Grid>
    		<Grid x:Name="Grid2" Background="Blue" RenderTransformOrigin="0.5,0.5">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<Grid.RenderTransform>
    				<CompositeTransform/>
    			</Grid.RenderTransform>
    		</Grid>
    		<TextBlock x:Name="WidthText" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="32" Loaded="WidthText_Loaded"/>
    	</Grid>
    </UserControl>

    I had to manually go in and alter the XAML of the 2 states I created.  State 1 slides grid2 to the right and State 2 slides Grid 1 to the left (which is where the negative converter comes in.)  See the bold lines above.

    The Code-Behind I used to update the width text...

    using System.Windows.Controls;
    
    namespace SilverlightApplication3
    {
    	public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			InitializeComponent();
    		}
    
    		private void WidthText_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			this.UpdateLayout();
    			this.WidthText.Text = this.ActualWidth.ToString();
    		}
    
    		private void LayoutRoot_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
    		{
    			this.UpdateLayout();
    			this.WidthText.Text = this.ActualWidth.ToString();
    		}
    	}
    }

    I used a textBlock because when I tried to bind to the actualWidth of the userControl it kept returning "0".  So as a work around I used the TextBlock method, however I am sure you could come up with a better solution.

    If you alter the states in the Blend UI at all you have to go back and manually reset the XAML for the binding.  It also gets a bit iffy at first when trying to resize the window.  You may have to resize grid1 and grid2 on the "sizeChanged method".

    In my sample clicking either grid will trigger it's respective state.

    I hope that gives you some ideas.

    Another solution may be to use a pathListBox with the 2 grids as children and have it slide.  I've not played with it but seeing the sliding action made me think a pathListBox could produce the same effect.

    ~Christine



    Friday, April 27, 2012 4:57 PM
  • Hello Christine,

    Waiting for you reply worth every minute!

    The approach you suggested seems to work great in my scenario. Thank you very much for the time dedicated to my problem.

    So far, I only made some minor changes:

    1 - It is hard to note in your sample code, but in the first transtion there is no "slidding" effect, since both panels are overlapaped and the first visual state transtion actually shows the panel that it was behind. So, when the control loads, I perform a visual state transtion in code-behind. It seems to be working;

    2 - Don't know why I did not have to use clipping, since I tought that this translation would make the sliding panel moves outside the control boundaries, but this is not hapenning. Either way, there is a good clipping to bounds class helper  Chuck Hays suggested;

    3 - No better suggestion for the TextBlock approach. I set its visibility to collapsed unti this moment.

    Thank you very much for the help.

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Friday, April 27, 2012 8:13 PM
  • 2 - Don't know why I did not have to use clipping, since I tought that this translation would make the sliding panel moves outside the control boundaries, but this is not hapenning. Either way, there is a good clipping to bounds class helper  Chuck Hays suggested;

    Thank you for sharing that!  

    That was how I started thinking about a way to do this, but I couldn't get the clipping to expand with the window.

    I'm glad your project is coming together.

    ~Christine

    Friday, April 27, 2012 8:49 PM
  • Hello Christine,

    Don't know if I should open a new post for that.

    Well, the problem I am experiencing with this approach is that when my constrol change its size, the panel are not updated, since there is no actual visual state change.

    In my case, this sliding pannel control I am building is inside an AccordionItem and this AccordionItem is in a grid panel with a gridslitter. So when the user moves the slitter, we can see the other hidden panel also. I believe this is due to the fact that no visual state changes are performed.

    How do you suggest to fix this problem? Do you think it is valid to fire the panel transistions every time the layout size changes. If so, how do you suggest to do that?

    In your sample code, the problem also appears when you click at least once in a panel (to perform visual state change) and them resizes the window you can see the other panel there too.

    Thank you,

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Sunday, April 29, 2012 3:14 PM
  • Can you show me a watered down version or sample of your setup in xaml? 

    I'm being thick this morning and having a hard time understanding your setup.

    What I'm picturing is...

    <Grid>

         <AccordionItem>

              <Grid>

                   <SlidingPanelControl/>

              </Grid>

         </AccordionItem>

    </Grid>

    Is that right?

    ~Christine


    My Gallery


    Sunday, April 29, 2012 4:26 PM
  • Hello Christine,

    In fact I have (simplified version):

    <Grid> <toolkit:DockPanel x:Name="ProjectsDockPanel" LastChildFill="True" Margin="0,0,8,0"> <toolkit:Accordion HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" toolkit:DockPanel.Dock="Top"> <toolkit:AccordionItem x:Name="ProjectsAccordionItem" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" > <toolkit:AccordionItem.Header> <StackPanel> <TextBlock Text="{Binding ApplicationStrings.Projects, Source={StaticResource ResourceWrapper}}" ToolTipService.ToolTip="{Binding ApplicationStrings.PartsAreaDescription, Source={StaticResource ResourceWrapper}}" FontSize="14" FontWeight="Bold" HorizontalAlignment="Right" Width="213" /> </StackPanel> </toolkit:AccordionItem.Header> <loc:ProjectsControl x:Name="userProjects"></loc:ProjectsControl>

    </toolkit:AccordionItem>

    </toolkit:Accordion> <toolkit:DockPanel> <sdk:GridSplitter Margin="0" /> <toolkit:DockPanel x:Name="CuttingListDockPanel" Grid.Column="1"> </Grid>

    In reality I have 2 more accordion Items (this is not the problem) but when the user changes the splitter position, I must recalculate panels so the user cannot see the panel that was translated (hidden).

    Any ideas?

    Thank you,

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Sunday, April 29, 2012 9:45 PM
  • I am short handed today, so I will play around with this tonight and try to come up with some options for you. 

    Unless someone else has already solved your issue.

    ~Christine


    My Gallery

    Monday, April 30, 2012 4:40 PM
  • Is the height an issue by chance?  So far we've only been dealing with Width.

    I came up with the following that seems to work, I'll post it to SkyDrive in a sec so you can play with it and tell me if I'm close.

    This is how I set myProjectsPanel (userControl) up...

    <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" xmlns:local="clr-namespace:SilverlightApplication1" x:Name="userControl"
    	mc:Ignorable="d"
    	x:Class="SilverlightApplication1.myProjectsPanel" SizeChanged="userControl_SizeChanged">
    	<Grid x:Name="LayoutRoot">
    		<Grid.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black" Offset="0"/>
    				<GradientStop Color="White" Offset="1"/>
    			</LinearGradientBrush>
    		</Grid.Background>
    		<TextBlock x:Name="WidthText" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding ActualWidth, ElementName=LayoutRoot, Mode=OneWay}" VerticalAlignment="Top" Opacity="0"/>
    		<TextBlock x:Name="HeightText" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding ActualHeight, ElementName=LayoutRoot, Mode=OneWay}" VerticalAlignment="Top" Margin="0,20,0,0" Opacity="0"/>
    		<Canvas x:Name="mainGrid">
    			<Canvas.Background>
    				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    					<GradientStop Color="Black" Offset="0"/>
    					<GradientStop Color="White" Offset="1"/>
    				</LinearGradientBrush>
    			</Canvas.Background>
    			<StackPanel x:Name="StackPanel" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5">
    				<Grid x:Name="Panel1" Background="Red">
    					<Button x:Name="btn1" Content="Go Right" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Click="slidePanels" Tag="Left"/>
    				</Grid>
    				<Grid x:Name="Panel2" Background="Blue">
    					<Button x:Name="btn2" Content="Go Left" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Tag="Right" Click="slidePanels"/>
    				</Grid>
    			</StackPanel>
    		</Canvas>
    	</Grid>
    </UserControl>

    Ignore the backgrounds.  I was just using them to see what the control was doing when building it.

    And the code behind...

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    
    namespace SilverlightApplication1
    {
    	public partial class myProjectsPanel : UserControl
    	{
    		private string currentState = "Left";
    		
    		public myProjectsPanel()
    		{
    			InitializeComponent();
    		}
    
    		private void userControl_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
    		{
    			this.WidthText.Text = this.ActualWidth.ToString();
    			this.HeightText.Text = this.ActualHeight.ToString();
    			double a = Convert.ToDouble(WidthText.Text);
    			double b = Convert.ToDouble(HeightText.Text);
    			
    			this.mainGrid.Width = a * 2;
    			this.mainGrid.Height = b;
    			this.Panel1.Width = this.Panel2.Width = a;
    			this.Panel1.Height = this.Panel2.Height = b;
    			
    			TranslateTransform translate = new TranslateTransform();
    			if (currentState == "Left")
    				translate.X = 0;
    			else
    				translate.X = a * -1;
    			this.mainGrid.RenderTransform = translate;
    		}
    
    		private void slidePanels(object sender, System.Windows.RoutedEventArgs e)
    		{
    			Button btn = sender as Button;
    			
    			double a = Convert.ToDouble(WidthText.Text);
    			double b = Convert.ToDouble(HeightText.Text);
    			this.Panel1.Width = this.Panel2.Width = a;
    			this.Panel1.Height = this.Panel2.Height = b;
    			
    			TranslateTransform translate = new TranslateTransform();
    			mainGrid.RenderTransform = translate;
    			
    			DoubleAnimation da = new DoubleAnimation();
    			da.Duration = new Duration(TimeSpan.FromSeconds(2));
    			
    			Storyboard.SetTarget(da, translate);
    			Storyboard.SetTargetProperty(da, new PropertyPath(TranslateTransform.XProperty));
    			Storyboard sb = new Storyboard();
    			
    			if (btn.Tag.ToString() == "Left")
    			{				
    				da.From = 0;
    				da.To = a * -1;
    				
    				sb.Children.Add(da);
    				sb.Begin();
    			
    				currentState = "Right";
    			}
    			else
    			{
    				da.From = a * -1;
    				da.To = 0;
    				
    				sb.Children.Add(da);
    				sb.Begin();
    				
    				currentState = "Left";
    			}
    		}
    	}
    }

    If height is an issue and you don't set it or bind the control to a certain height, the above won't work and we'll have to try again.  I only addressed width.

    This was my main page xaml...

    <Grid x:Name="LayoutRoot" Background="White" >
    		<toolkit:Accordion x:Name="myAccordion" Margin="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    			<toolkit:AccordionItem Header="Header">
    				<StackPanel Height="100" Width="100">
    					<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
    				</StackPanel>
    			</toolkit:AccordionItem>
    			<local:myProjectsPanel x:Name="myProjectPanel" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0" MinHeight="500"/>
    		</toolkit:Accordion>
    	</Grid>

    I didn't use converters, but I did use the TextBlock method.

    ~Christine

    https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!401&parid=513B70517E544EDB!131


    My Gallery



    Monday, April 30, 2012 10:59 PM
  • Regarding Height and if you need the height to expand to the full height of the Accordion Item....

    I played with the Accordion templates and solved the height thing like this...

    1.  I put myProjectPanel into an AccordionItem

    2.  Right-Clicked the AccordionItem and selected Edit Template > Edit Copy

    3.  I selected the "ExpandSite" in the template... Right-Clicked … Edit Template > Edit A Copy

    4.  In the ExpandableContentControlStyle you'll notice they have the "ContentSite" Alignments set to Left and Top.  I reset these bindings for both vertical and horizontal and set them to Stretch.

    I'll upload the one with the templates to my SkyDrive so you can see what I'm talking about.

    ~Christine

    https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!402&parid=513B70517E544EDB!131

    P.S.  You actually don't need to put the control into an AccordionItem.  You could edit the Accordion template itself.  Just Edit the template and find the ExpandableSite, edit it's template and set the alignment from Left/Top to stretch.


    My Gallery



    Monday, April 30, 2012 11:37 PM
  • Hello Christine,

    I spent the last days implementing (and understanding) the changes you suggested. Altought I still did not changed the templates, width and height resizing seems to be working fine. Maybe because in my panels I have DockPanels that resizes acutomatically to fit on the AccordionItem.

    Maybe there is a problem with the height that I did not figure out so far. So I want to play with your template suggestion. The problem is that I cannot perform step step 3. When I right-click on the "ExpandSite", all edit template options are disabled. Any suggestions?

    Thank you very much for all your assisance. I suggest that you create a custom control and publish it somewhere. When I came up with this requirement to my application, the comparison was with the navigation present on iOS devices. They have a really great sliding panel to see hierarquical information...

    Thank you,

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Thursday, May 3, 2012 1:49 PM
  • Maybe there is a problem with the height that I did not figure out so far. So I want to play with your template suggestion. The problem is that I cannot perform step step 3. When I right-click on the "ExpandSite", all edit template options are disabled. Any suggestions?

    How I got to it was...

    Accordion > Edit Additional Templates > Edit Generated Item Container (ItemContainerStyle) > Edit Current (or copy)

    Then...

    ExpandSite > Edit Template > Edit Current (or copy)

    Then...

    That is where the "ContentSite" was hiding.

    There isn't by chance a lock to the right of it is there?  I've no clue how I do it, but I often lock items and get right annoyed when I can't click them.  I've done it 101 times only to find out I've locked it somehow.

    I'm glad you got it all worked out.  And the height was only an issue for me in my example.  So you can just ignore all I said about the height if you are having no problems with it.

    ~Christine


    My Gallery

    Friday, May 4, 2012 1:33 AM
  • Hello Christine,

    Thank you for the reply,

    I will leave the template issue for another time. I think it is time to move on now.

    Thank you very much for the assistance and atention.

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Friday, May 4, 2012 1:26 PM