Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic collapsible side panel (Read 2370 times)
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
collapsible side panel
May 15th, 2017 at 10:27am
Print Post  
I have following items in left side panel



this is the code section for above

Code
Select All
               <StackPanel Grid.Column="0" Margin="0,0,5,65" Grid.RowSpan="3">

                <diag:NodeListView x:Name="shapeList" Margin="4,0,-59,0"/>

                <Grid Grid.Row="1" Height="298">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="27*"/>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="13*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="0*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="162"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <mfc:PropertyGrid x:Name="diagramPropertyGrid" SectionCornerRadius="0"  Header="Diagram Properties"  DescriptionVisibility="Collapsed"  Padding="0" Margin="4,4,-60,0" SectionMargin="0,0,0,0" PropertyDisplayType="DeclaredOnly" ShowReadOnlyProperties="False"  Grid.Column="0" Grid.ColumnSpan="6" />
                    <mfc:PropertyGrid x:Name="wpfPropertyGrid" SectionCornerRadius="0"  Header="Selected Object Properties"   Grid.Row="1" Padding="0" Margin="4,5,-60,4"   SectionMargin="0,0,0,0"   PropertyDisplayType="DeclaredOnly"  ShowReadOnlyProperties="False"  Grid.Column="0" Grid.ColumnSpan="6" />
                    <mfc:ColorEditor x:Name="colorEdit" ColorBoxClick="OnColorClick" RenderTransformOrigin="0.562,2.074" Grid.ColumnSpan="6" Margin="0,135,-140,-239" Grid.Row="1" />
                    <GridSplitter ShowsPreview="True" Grid.Row="1" Height="4" Background="#88aee0" VerticalAlignment="Top" Grid.ColumnSpan="6" Width="316" Margin="0,0,-60,0" />
                </Grid>

                 </StackPanel>


				<diag:Overview x:Name="overview" Document="{Binding ElementName=flowchart}" Margin="55,0,950,57" RenderTransformOrigin="3.419,-5.111" Grid.Column="1"/>


                <mfc:ZoomControl
			x:Name="zoomControl"
            Target="{Binding ElementName=flowchart}"
			ScrollStep="40"
			MinZoomFactor="10"
			Width="52"
			Panel.ZIndex="1"
			Margin="70,93,968,119" RenderTransformOrigin="3.198,0.538" HorizontalAlignment="Center" Grid.Column="1" Grid.RowSpan="3">
                                <mfc:ZoomControl.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="-0.197"/>
                                        <TranslateTransform X="0.083" Y="-1.129"/>
                                    </TransformGroup>
                                </mfc:ZoomControl.RenderTransform>
                </mfc:ZoomControl> 



Now I'm trying to insert these items to single panel and allow to collapse that panel.

So I tried following thing

            
Code
Select All
<Expander Width="auto" ExpandDirection="Left" HorizontalAlignment="Right" Margin="0,0,955,10" Grid.RowSpan="5" Grid.ColumnSpan="2">
                <Expander.Header>

                <Border BorderBrush="Black" BorderThickness="1" Height="598" Margin="0,0,-1,0" Width="370">
                <!-- Toolbox -->
                <StackPanel Grid.Column="0" Margin="0,0,5,65" Grid.RowSpan="3">

                <diag:NodeListView x:Name="shapeList" Margin="4,0,-59,0"/>

                <Grid Grid.Row="1" Height="298">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="27*"/>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="13*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="0*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="162"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <mfc:PropertyGrid x:Name="diagramPropertyGrid" SectionCornerRadius="0"  Header="Diagram Properties"  DescriptionVisibility="Collapsed"  Padding="0" Margin="4,4,-60,0" SectionMargin="0,0,0,0" PropertyDisplayType="DeclaredOnly" ShowReadOnlyProperties="False"  Grid.Column="0" Grid.ColumnSpan="6" />
                    <mfc:PropertyGrid x:Name="wpfPropertyGrid" SectionCornerRadius="0"  Header="Selected Object Properties"   Grid.Row="1" Padding="0" Margin="4,5,-60,4"   SectionMargin="0,0,0,0"   PropertyDisplayType="DeclaredOnly"  ShowReadOnlyProperties="False"  Grid.Column="0" Grid.ColumnSpan="6" />
                    <mfc:ColorEditor x:Name="colorEdit" ColorBoxClick="OnColorClick" RenderTransformOrigin="0.562,2.074" Grid.ColumnSpan="6" Margin="0,135,-140,-239" Grid.Row="1" />
                    <GridSplitter ShowsPreview="True" Grid.Row="1" Height="4" Background="#88aee0" VerticalAlignment="Top" Grid.ColumnSpan="6" Width="316" Margin="0,0,-60,0" />
                </Grid>

                            <diag:Overview x:Name="overview" Document="{Binding ElementName=flowchart}" Margin="55,0,950,57" RenderTransformOrigin="3.419,-5.111" Grid.Column="1"/>


                            <mfc:ZoomControl
			x:Name="zoomControl"
            Target="{Binding ElementName=flowchart}"
			ScrollStep="40"
			MinZoomFactor="10"
			Width="52"
			Panel.ZIndex="1"
			Margin="70,93,968,119" RenderTransformOrigin="3.198,0.538" HorizontalAlignment="Center" Grid.Column="1" Grid.RowSpan="3">
                                <mfc:ZoomControl.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="-0.197"/>
                                        <TranslateTransform X="0.083" Y="-1.129"/>
                                    </TransformGroup>
                                </mfc:ZoomControl.RenderTransform>
                            </mfc:ZoomControl>
                        </StackPanel>

                    </Border>

                </Expander.Header>
            </Expander>

 



but this is not expand properly and missing `mfc:ZoomControl` and `Overview `
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: collapsible side panel
Reply #1 - May 15th, 2017 at 4:26pm
Print Post  
Expander expands its Content and not its Header, you should move all the Xaml from <Expander.Header> to <Expander.Content>.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: collapsible side panel
Reply #2 - May 15th, 2017 at 5:21pm
Print Post  
actually i want to collapse this as a slide collapse , not up/ down collapse

like this image



  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: collapsible side panel
Reply #3 - May 17th, 2017 at 8:09am
Print Post  
It already collapses to the left due to the ExpandDirection setting from your code above, have you removed it?

Code
Select All
<Expander Width="auto" ExpandDirection="Left" HorizontalAlignment="Right" DockPanel.Dock="Left" >
	<Expander.Header>toolbox</Expander.Header>
	<Expander.Content>
		<Border BorderBrush="Black" BorderThickness="1" Height="598" Width="370">
		... 



If you need something like Visual Studio's auto-hiding dockable windows, check the Dock control from our WPF pack.
  

collapsed.png ( 31 KB | 122 Downloads )
collapsed.png
expanded.png ( 49 KB | 110 Downloads )
expanded.png
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint