0

我正在玩Windows Phone Toolkit中的扩展控件(我正在使用它用于wp7)的一个示例。如何使内容隐藏在扩展器中Windows Phone控件

enter image description here

当我加载了精简版的一切似乎扩大。当我点击顾客比萨或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}" 

我不明白什么是“结合”是指太。它似乎知道要使用哪些数据,但我不知道它是如何知道的。

回答

0

要更改扩展视图,你可以做以下 -register的敲击事件的展开状态,并添加结合为isExpanded(这将绑定到CustomPizza的IsExpanded属性)

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

- 在点击事件切换CustomPizza的IsExpanded标志:

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}",当设置(或绑定)一个ItemsControl的到列表ItemsSource属性(列表框被继承一个ItemsControl),ItemTemplate中的DataTemplate将自动设置为每个单独的项目。例如,在这里,您将它设置为CustomPizza列表,以便每个ItemTemplate DataContext都将成为CustomPiza。所以ExpanderView将CustomPizza作为DataContext。 {Binding}只会传递DataContext,所以就像这样,HEaderTemplate中的任何内容都将获得相同的DataContext(CustomPizza)。如果你已经输入了{Binding Image}那么HeaderTemplate将只有图像字符串作为DataContext。