Expander Control Sizing

6 posts, 0 answers
  1. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 20 Dec 2012 Link to this post

    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
  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 20 Dec 2012 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 20 Dec 2012 Link to this post

    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
  5. Todor
    Admin
    Todor avatar
    778 posts

    Posted 27 Dec 2012 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 27 Dec 2012 Link to this post

    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
  7. Todor
    Admin
    Todor avatar
    778 posts

    Posted 02 Jan 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner