Как сделать содержимое скрытым в Expander Windows Phone Control

Question

Я играю с примером Expander Control из Windows Phone Toolkit (я использую его для wp7).

Когда я загружаю урезанную версию, все кажется расширенным. Когда я нажимаю на Customer Pizza или 2, ничего не происходит. Я хотел бы, чтобы вспомогательный материал был свернут, но я не знаю как.

<phone:PhoneApplicationPage 
    x:Class="ExpanderViewSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <toolkit:RelativeTimeConverter x:Key="RelativeTimeConverter"/>
        <DataTemplate x:Key="CustomHeaderTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" Stretch="None"/>
                <TextBlock Text="{Binding Name}" 
                                    FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                                    FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
            </StackPanel>


        </DataTemplate>
    <DataTemplate x:Key="CustomExpanderTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Image}" Stretch="None"/>
            <TextBlock Foreground="{StaticResource PhoneSubtleBrush}" VerticalAlignment="Center"
                                        FontSize="{StaticResource PhoneFontSizeNormal}">
                                <TextBlock.Text>
                                    <Binding Path="DateAdded" Converter="{StaticResource RelativeTimeConverter}" StringFormat="Date added: {0}" />
                                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
    </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" Text="WindowsPhoneGeek.com" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="ExpanderViewSample" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle2Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

<ListBox Grid.Row="0" x:Name="listBox">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
                        <toolkit:ExpanderView Header="{Binding}" Expander="{Binding}" 
                                    IsExpanded="False" 
                                  HeaderTemplate="{StaticResource CustomHeaderTemplate}"
                                 ExpanderTemplate="{StaticResource CustomExpanderTemplate}"></toolkit:ExpanderView>
                    </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

        </Grid>

    </Grid>
</phone:PhoneApplicationPage>


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

            List<CustomPizza> customPizzas = new List<CustomPizza>()
            {
                new CustomPizza() 
                { 
                        Name = "Custom Pizza 1", 
                        IsExpanded = false,
                        DateAdded = new DateTime(2010, 7, 8),
                        Image="Images/pizza1.png"
                },
                new CustomPizza() { Name = "Custom Pizza 2", DateAdded = new DateTime(2011, 2, 10), Image="Images/pizza2.png"}

            };

            this.listBox.ItemsSource = customPizzas;

            // Important properties:
            // IsExpanded
            // Header
            // Expander
            // ItemsSource
            // HeaderTemplate
            // ExpanderTemplate
            // ItemTemplate
            // NonExpandableHeader
            // IsNonExpandable
            // NonExpandableHeaderTemplate
        }


    }

        public class CustomPizza : INotifyPropertyChanged
        {
            private bool isExpanded;

            public string Image
            {
                get;
                set;
            }

            public string Name
            {
                get;
                set;
            }

            public DateTime DateAdded
            {
                get;
                set;
            }


            public bool IsExpanded
            {
                get
                {
                    return this.isExpanded;
                }
                set
                {
                    if (this.isExpanded != value)
                    {
                        this.isExpanded = value;
                        this.OnPropertyChanged("IsExpanded");
                    }
                }
            }

            public event PropertyChangedEventHandler PropertyChanged;

            protected void OnPropertyChanged(string propertyName)
            {
                PropertyChangedEventHandler handler = this.PropertyChanged;
                if (handler != null)
                {
                    handler(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }

Я также не понимаю, для чего это на самом деле

ExpanderView Header="{Binding}" Expander="{Binding}" 

Я не понимаю, что означает "связывание". Кажется, он просто знает, какие данные использовать, но я не знаю, откуда он это знает.

Answer 1

Чтобы изменить расширенное состояние представления расширения, вы можете выполнить следующую -register для события tap и добавить привязку к IsExpanded (это будет привязано к свойству IsExpanded CustomPizza)

 <toolkit:ExpanderView Header="{Binding}" Expander="{Binding}" 
                                IsExpanded="{Binding IsExpanded}" 
                              HeaderTemplate="{StaticResource CustomHeaderTemplate}"
                             ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
                          Tap="expander_OnTap"></toolkit:ExpanderView>

- в событии крана переключите флаг IsExpanded CustomPizza:

    private void expander_OnTap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        ExpanderView expander = sender as ExpanderView;
        CustomPizza customPizza = expander.DataContext as CustomPizza;
        customPizza.IsExpanded = !customPizza.IsExpanded;
    }

По вопросу о ExpanderView Header="{Binding}" Expander="{Binding}"когда вы устанавливаете (или привязываете) свойство ItemsSource ItemsControl к списку (ListBox наследуется от ItemsControl), DataTemplate внутри ItemTemplate будет автоматически установлен для каждого отдельного элемента. Например, здесь вы устанавливаете его в список CustomPizza, поэтому каждый элемент DataTemplate DataContext будет CustomPiza. Таким образом, ExpanderView будет иметь CustomPizza в качестве DataContext. {Binding} просто передаст DataContext, поэтому все, что находится внутри HEaderTemplate, получит тот же DataContext (CustomPizza). Если бы вы положили {Binding Image} тогда HeaderTemplate будет просто иметь строку Image в качестве DataContext.