Expander Control Sizing

[Mauro]

Hi,

I trying to use the Expander Control in a Pushpin on a map, so that when it is selected, it expands and shows more data.

The following is the DataTemplate that I'm using : 

<maps:Pushpin Background="{Binding Background}"
                      Content="{Binding}"
                      Location="{Binding GeoCoordinate}">
            <maps:Pushpin.ContentTemplate>
                <DataTemplate>
                    <telerikPrimitives:RadExpanderControl x:Name="ExpanderControl"
                                                          AnimatedIndicatorContentTemplate="{x:Null}"
                                                          IsExpanded="{Binding IsSelected,
                                                                               Mode=TwoWay}">
                        <telerikPrimitives:RadExpanderControl.ContentTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Width="{Binding ElementName=ExpanderControl,
                                                           Path=DataContext.ImageDimension}"
                                           Height="{Binding ElementName=ExpanderControl,
                                                            Path=DataContext.ImageDimension}"
                                           DataContext="/Images/PNG/image.home.{0}.png"
                                           Source="{Binding Converter={StaticResource ThemedImageConverter},
                                                            ConverterParameter=BackgroundCreation}"
                                           Visibility="{Binding ElementName=ExpanderControl,
                                                                Path=IsExpanded,
                                                                Converter={StaticResource BooleanToVisibilityConverter},
                                                                ConverterParameter=Invert}" />
                                    <TextBlock Style="{StaticResource PhoneTextNormalStyle}"
                                               Text="Home"
                                               TextWrapping="Wrap"
                                               Visibility="{Binding ElementName=ExpanderControl,
                                                                    Path=IsExpanded,
                                                                    Converter={StaticResource BooleanToVisibilityConverter}}" />
                                </StackPanel>
                            </DataTemplate>

                        </telerikPrimitives:RadExpanderControl.ContentTemplate>
                        <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                            <DataTemplate>
                                <TextBlock Style="{StaticResource PhoneTextNormalStyle}"
                                           Text="This is your home"
                                           TextWrapping="Wrap"
                                           Visibility="{Binding ElementName=ExpanderControl,
                                                                Path=IsExpanded,
                                                                Converter={StaticResource BooleanToVisibilityConverter}}" />
                            </DataTemplate>
                        </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                    </telerikPrimitives:RadExpanderControl>
                </DataTemplate>
            </maps:Pushpin.ContentTemplate>
        </maps:Pushpin>

When I click on the pushpin, it shows the expanded data, however when I click on it again, it width does not adjust and stays longer. (See Collapsed State Image). Is there anyway to reduce the width to its initial state size?

Regards,
Mauro

[Deyan]

Hello Mauro,

Before getting to your question I would like to kindly remind you that the License for your RadControls for Windows Phone copy has expired in April this year and you are not eligible for support services according to our policy. You will have to renew your license in order to be able to use our services.

I have tried to reproduce the behavior that you describe but did not succeed in doing so. Can you please prepare a sample project that reproduces it and attach it here for us to debug.

Thanks for your time.

Kind regards,
Deyan
the Telerik team

[Mauro]

Hi Deyan,

I understand that my license has expired, but I'm just experimenting with your new controls to see if I can use them in my next app.

I have managed to create a sample as requested : 

<phone:PhoneApplicationPage x:Class="ExpanderViewBasicSample.MainPage"
                            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:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
                            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            d:DesignHeight="768"
                            d:DesignWidth="480"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True"
                            SupportedOrientations="Portrait"
                            mc:Ignorable="d">

    <phone:PhoneApplicationPage.Resources>

        <DataTemplate x:Name="TestTemplate">
            <maps:Pushpin Background="Red"
                          Location="{Binding GeoCoordinate}">

                <maps:Pushpin.ContentTemplate>
                    <DataTemplate>
                        <telerikPrimitives:RadExpanderControl Background="Red"
                                                          AnimatedIndicatorContentTemplate="{x:Null}">
                            <telerikPrimitives:RadExpanderControl.ContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="Header" />
                                </DataTemplate>
                            </telerikPrimitives:RadExpanderControl.ContentTemplate>

                            <telerikPrimitives:RadExpanderControl.ExpandedStateContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="Longer Header" />
                                </DataTemplate>
                            </telerikPrimitives:RadExpanderControl.ExpandedStateContentTemplate>

                            <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="Details" />
                                </DataTemplate>
                            </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                        </telerikPrimitives:RadExpanderControl>
                   </DataTemplate>
                    </maps:Pushpin.ContentTemplate>
            </maps:Pushpin>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--  LayoutRoot is the root grid where all page content is placed  -->
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  TitlePanel contains the name of the application and page title  -->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Style="{StaticResource PhoneTextNormalStyle}"
                       Text="MY APPLICATION" />
            <TextBlock x:Name="PageTitle"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}"
                       Text="page name" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <StackPanel x:Name="ContentPanel"
                    Grid.Row="1"
                    Margin="12,0,12,0">

            <maps:Map x:Name="MapControl"
                      Margin="12,0,0,0"
                      CopyrightVisibility="Collapsed"
                      LogoVisibility="Collapsed"
                      ZoomLevel="4">
                <maps:MapLayer>
                    <maps:MapItemsControl x:Name="Layer"
                                          ItemTemplate="{StaticResource TestTemplate}" />
                </maps:MapLayer>
            </maps:Map>
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

using System.Collections.Generic;
using System.Device.Location;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;

namespace ExpanderViewBasicSample
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            MapControl.Center = new GeoCoordinate(40.7142, 74.0064);
            MapControl.CredentialsProvider = new ApplicationIdCredentialsProvider("BING MAPS KEY HERE");
            MapControl.Mode = new RoadMode();
            Layer.ItemsSource = new List<GeoCoordinate> {new GeoCoordinate(40.7142, 74.0064)};

        }

        public class Loc
        {
            public GeoCoordinate GeoCoordinate { get; set; }
        }
    }
}

You should see that when you click on the control, it expands, but does not contract. Is the the correct behaviour? BTW, you will just need to paste a Bing Maps key in the code behind section of the code.

Regards,
Mauro

[Todor]

Hi Mauro,

I was able to reproduce the behavior that you explained. Our first idea for RadExpanderControl was to have a simple control with fixed header which was only expanding/collapsing the additional content. Then we decided that in some cases it might be useful to allow the user to change the header for the expanded state. Now your scenario brings up this question whether the control should keep its initial width when collapsed again (as you expect) or it should measure its expanded width even before the control is expanded and take that width from the very beginning. We will discuss our options with the development team and let you know about our decision.

Kind regards,
Todor
the Telerik team

[Mauro]

Hi Todor,

Thanks very much for your reply and I will be looking forward to hearing your guys decision. While experimenting with the expander control, I can across a possible bug? If you set the expander control as expanded when it starts up, the ExpandableContent displays, however the ContentTemplate is shown instead of the ExpandedStateContent, which from what I understand is incorrect?

Below is a sample to demonstrate this. The Expander Control is set to be expanded.

<phone:PhoneApplicationPage x:Class="ExpanderViewBasicSample.MainPage"
                            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:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
                            d:DesignHeight="768"
                            d:DesignWidth="480"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True"
                            SupportedOrientations="Portrait"
                            mc:Ignorable="d">

    <phone:PhoneApplicationPage.Resources>

        <DataTemplate x:Name="TestTemplate">
            <maps:Pushpin Background="Red"
                          Location="{Binding GeoCoordinate}">

                <maps:Pushpin.ContentTemplate>
                    <DataTemplate>
                        <telerikPrimitives:RadExpanderControl AnimatedIndicatorContentTemplate="{x:Null}"
                                                              Background="Red"
                                                              IsExpanded="True">
                            <telerikPrimitives:RadExpanderControl.ContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="Header" />
                                </DataTemplate>
                            </telerikPrimitives:RadExpanderControl.ContentTemplate>

                            <telerikPrimitives:RadExpanderControl.ExpandedStateContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="Expanded Header" />
                                </DataTemplate>
                            </telerikPrimitives:RadExpanderControl.ExpandedStateContentTemplate>

                            <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                                <DataTemplate>
                                    <TextBlock Text="Details" />
                                </DataTemplate>
                            </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                        </telerikPrimitives:RadExpanderControl>
                    </DataTemplate>
                </maps:Pushpin.ContentTemplate>
            </maps:Pushpin>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--  LayoutRoot is the root grid where all page content is placed  -->
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  TitlePanel contains the name of the application and page title  -->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Style="{StaticResource PhoneTextNormalStyle}"
                       Text="MY APPLICATION" />
            <TextBlock x:Name="PageTitle"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}"
                       Text="page name" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <StackPanel x:Name="ContentPanel"
                    Grid.Row="1"
                    Margin="12,0,12,0">

            <maps:Map x:Name="MapControl"
                      Margin="12,0,0,0"
                      CopyrightVisibility="Collapsed"
                      LogoVisibility="Collapsed"
                      ZoomLevel="4">
                <maps:MapLayer>
                    <maps:MapItemsControl x:Name="Layer"
                                          ItemTemplate="{StaticResource TestTemplate}" />
                </maps:MapLayer>
            </maps:Map>
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

using System.Collections.Generic;
using System.Device.Location;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;

namespace ExpanderViewBasicSample
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            MapControl.Center = new GeoCoordinate(40.7142, 74.0064);
            MapControl.CredentialsProvider = new ApplicationIdCredentialsProvider("BING MAPS KEY HERE");
            MapControl.Mode = new RoadMode();
            Layer.ItemsSource = new List<GeoCoordinate> { new GeoCoordinate(40.7142, 74.0064) };

        }

        public class Loc
        {
            public GeoCoordinate GeoCoordinate { get; set; }
        }
    }
}

Is this a bug or by design?

Thanks very much

Regards,
Mauro

[Todor]

Hi Mauro,

Yes, if the expander control is expanded it should display the ExpandedStateContentTemplate instead of the ContentTemplate. Thank you for reporting this.

Kind regards,
Todor
the Telerik team