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。