Xaml 如何使内容隐藏在Windows Phone控件中

我正在使用Windows Phone Toolkit中的Expander控件示例（我将其用于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));
                }
            }
        }

---

我也不明白“绑定”指的是什么。它似乎知道要使用哪些数据，但我不知道它是如何知道的。

要更改expander视图的展开状态，可以执行以下操作 -注册tap事件并将绑定添加到IsExpanded（这将绑定到CustomPizza的IsExpanded属性）

关于

ExpanderView Header=“{Binding}”Expander=“{Binding}”

的问题，当您将ItemsControl的ItemsSource属性设置（或绑定）到列表时（ListBox从ItemsControl继承），ItemTemplate中的DataTemplate将自动设置为每个单独的项。例如，这里您将其设置为CustomPizza列表，以便每个ItemTemplate DataContext都将是CustomPizza。因此ExpanderView将CustomPizza作为DataContext<代码>{Binding}将只传递DataContext，这样HEaderTemplate中的任何内容都将获得相同的DataContext（CustomPizza）。如果您已经放置了

{Binding Image}

，那么HeaderTemplate将只将图像字符串作为DataContext

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

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

    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;
    }