Select to view content in your preferred language

2.0, looking for CollapsiblePanel

796
6
07-23-2010 08:06 AM
DaveOrlando
Frequent Contributor
Hello, I have been building a template from scatch and am looking to utilize the CollapsiblePanel as shown in the provided template. Is there an assembly for this? I can see in the template that they use " xmlns:userControls="clr-namespace:ESRI.ArcGIS.SilverlightMapApp" " but is this available outside of their template?

(would also like to use the new navigator, but only get the older one)

newbee, a little confused.
0 Kudos
6 Replies
AliMirzabeigi
Emerging Contributor
Hi Dave,

If you create a map project using "ESRI Standard Map Application" template you will see that there is a CollapsiblePanel control under "UserControls" folder of the project. You can use it in your own template.
0 Kudos
DaveOrlando
Frequent Contributor
Thanks Ali,

Got them working for the most part although I can't get them to collapse with ToggleCollapseAction, only with ToggleVisibilityActions which kind-of defeats the purpose. Not sure why?.....
0 Kudos
AliMirzabeigi
Emerging Contributor
Dave,

Consider a Grid containing your CollapsiblePanel control and an image control on top-left corner of it. If you want to toggle the collapse action on MouseDown event of the image then you can simply follow the pattern in the following XAML where "actions" XML Namespace is set to xmlns:actions="clr-namespace:ESRI.ArcGIS.SilverlightMapApp.Actions".
<Grid>
    <userControls:CollapsiblePanel x:Name="MyCollapsiblePanel" IsExpanded="True">
        <!-- Content here -->
    </userControls:CollapsiblePanel>
    <Image Source="Images/MyImage.png" HorizontalAlignment="Left" VerticalAlignment="Top" 
                Stretch="Fill" Height="40" Width="40" Margin="-10">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                         <actions:ToggleCollapseAction TargetName="MyCollapsiblePanel" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
    </Image>
</Grid>
0 Kudos
DaveOrlando
Frequent Contributor
Thank-you for the quick responses,
I still have a weird feeling that something else is wrong because that is exactly what I have. The ToggleVisibilityAction works, but the ToggleCollapseAction does not. Same result, just without the fancy fade away. Is there a limit to what you can put inside a CollapsiblePanel?

<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
                    <sl:CollapsiblePanel x:Name="cpThemes" IsExpanded="True"
                                         VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                        <Border x:Name="borderThemes" Background="#99072C6E" BorderThickness="1" CornerRadius="5"
                        HorizontalAlignment="Left"  VerticalAlignment="Top"
                        Padding="5" BorderBrush="Black" >
                            <Border.Effect>
                                <DropShadowEffect/>
                            </Border.Effect>
                            <Grid>
                                <TextBlock Text="Themes" Foreground="WhiteSmoke" FontWeight="Bold" Grid.Row="0"/>
                                <ListBox x:Name="MyLayers" ItemsSource="{Binding Layers, ElementName=MyMap}" Margin="0,20,0,0">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <CheckBox IsChecked="{Binding Visible, Mode=TwoWay}" />
                                                <Slider Margin="-5,0,0,0" Minimum="0" Maximum="1" Width="60" 
                                                Value="{Binding Opacity, Mode=TwoWay}" Height="18" />
                                                <TextBlock Text="{Binding ID, Mode=OneWay}" Margin="5,0,0,0" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </Grid>
                        </Border>
                    </sl:CollapsiblePanel>

                    <Image Source="Images/Layers-32.png" HorizontalAlignment="Left" VerticalAlignment="Top"
                           Stretch="Fill" Height="40" Width="40" Margin="10">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <!--<slActions:ToggleCollapseAction TargetName="cpThemes"/>-->
                                <slActions:ToggleVisibilityAction TargetName="cpThemes"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>
                </Grid>
0 Kudos
DominiqueBroux
Esri Frequent Contributor
I've tested your code, it looks working.

The "ESRI Standard Map Application" template is also using ToggleCollapseAction  to collapse the main menu and toolbar.
Is it working with your version?
0 Kudos
DaveOrlando
Frequent Contributor
Works great now, instead of creating a blank Silverlight Applications and adding all the User Controls myself, I have started with the ESRI Template and rearranged the tools back to how I wanted them.
Thanks again for the responses.
0 Kudos