Wie UWP Pivot Appearance mit MVVM-Muster zu aktualisieren

Question

Ich entwickle UWP App mit MVVM-Muster. Es gibt ein Pivot-Steuerelement auf der Seite, hier ist ein gist. Es sieht wie folgt aus:

Ich brauche ein Drehelement-Header und Listenelement zu markieren, dann Benutzer eine Antwort auswählen. Wie folgt aus:

Und ich habe ein Problem mit der Aktualisierung von Pivot-Header und sublist appearence. Ich habe versucht, für verschiedene Pivot-Ereignisse, wie LayoutUpdated, Loaded, PivotItemLoaded und andere zu abonnieren, aber auf diese Weise wurde das Problem nicht gelöst.

Es scheint, als ob alle Pivot-Elemente einmal beim Erstellen der Seite geladen werden. Ich habe erreicht, dass Header-Highlights dann Seite neu geladen oder renavigiert, aber das ist nicht was ich brauche.

Wie kann ich den Pivot-Header-Appearance und andere Elemente aktualisieren?

Answer 1

Es scheint, als ob alle Pivot-Elemente einmal beim Erstellen der Seite geladen werden. Ich habe diese Header-Highlights erreicht, dann wurde die Seite neu geladen oder renavigiert, aber das ist nicht das, was ich brauche. Wie kann ich Pivot-Header-Appearance und andere Elemente aktualisieren?

Für Ihre Anforderung müssen Sie ein logisches Datenmodell erstellen.

Die DataContext von PivotHeader ist "Frage". So können Sie IsCheck Eigenschaft für PivotHeader in der Question Klasse machen. Und die DataContext des ListView-Artikels ist "Antwort". So könnten Sie 'IsRightFlag' Eigenschaft für Listview Element machen. Dies ist eine typische Sandwich-Architektur.

ViewModel.cs

public class MainPageViewModel : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 
    public void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
    } 
    private ObservableCollection<Question> questions; 
    public ObservableCollection<Question> Questions { get => questions; set => questions = value; } 

    public MainPageViewModel() 
    { 
     questions = new ObservableCollection<Question>(); 
     this.Questions.Add(new Question { Text = "Hello This Nico !", QuestionNumber = "1", RightAnswer = new Answer { Text = "Nico" } }); 
     this.Questions.Add(new Question { Text = "Hello This Sunteen !", QuestionNumber = "2", RightAnswer = new Answer { Text = "Sunteen" } }); 
     this.Questions.Add(new Question { Text = "Hello This Lidong !", QuestionNumber = "3", RightAnswer = new Answer { Text = "Lidong" } }); 
    } 
} 

Question.cs

public class Question : INotifyPropertyChanged 
    { 
     public string QuestionNumber { get; set; } 
     public string Text { get; set; } 
     public Answer RightAnswer { get; set; } 
     public ObservableCollection<Answer> Answers { get => answers; set => answers = value; } 
     public void OnPropertyChanged([CallerMemberName] string propertyName = null) 
     { 
      this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
     } 

     private ObservableCollection<Answer> answers; 
     private Question CurrentQuestion; 
     public event PropertyChangedEventHandler PropertyChanged; 
     private Answer selectItem; 
     public Answer SelectItem 
     { 
      get 
      { 
       return selectItem; 
      } 
      set 
      { 
       selectItem = value; 

       if (selectItem.Text == CurrentQuestion.RightAnswer.Text) 
       { 
        selectItem.IsRightFlag = true; 
        IsCheck = true; 
       } 
       else 
       { 
        selectItem.IsRightFlag = false; 
        IsCheck = false; 
       } 
       OnPropertyChanged(); 
      } 
     } 
     private bool isCheck; 
     public bool IsCheck 
     { 
      get 
      { 
       return isCheck; 
      } 
      set 
      { 
       isCheck = value; 
       OnPropertyChanged(); 
      } 
     } 
     public ICommand ItemCommand 
     { 
      get 
      { 
       return new CommadEventHandler<Question>((item) => ItemClick(item)); 
      } 
     } 
     private void ItemClick(Question item) 
     { 
      this.CurrentQuestion = item; 
     } 
     public Question() 
     { 
      answers = new ObservableCollection<Answer>(); 
      Answers.Add(new Answer { Text = "Lidong" }); 
      Answers.Add(new Answer { Text = "Nico" }); 
      Answers.Add(new Answer { Text = "Sunteen" }); 
      Answers.Add(new Answer { Text = "Who ?" }); 
     } 
    } 

Answer.cs

public class Answer : INotifyPropertyChanged 
{ 
    public string Text { get; set; } 
    private bool isRigntFlag; 
    public event PropertyChangedEventHandler PropertyChanged; 
    public void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
    } 
    public bool IsRightFlag 
    { 
     get 
     { 
      return isRigntFlag; 
     } 
     set 
     { 
      isRigntFlag = value; 
      OnPropertyChanged(); 
     } 
    } 
} 

MainPage.xaml

<Page.DataContext> 
    <local:MainPageViewModel/> 
</Page.DataContext> 
<Page.Resources> 
    <local:WaringConverter x:Key="converter"/> 
    <DataTemplate x:Key="AnswerListDataTemplate"> 
     <Border Margin="5" BorderThickness="2" BorderBrush="White" Background="Transparent" 
       DataContext="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}"> 
      <TextBlock 
       Margin="10" 
       FontSize="28" 
       TextWrapping="WrapWholeWords" 
       Text="{Binding Text}" 
       Foreground="{Binding IsRightFlag, Converter={StaticResource converter},Mode=TwoWay}"/> 
     </Border> 
    </DataTemplate> 
    <DataTemplate x:Key="PivotQuestionDataTemplate"> 
     <StackPanel Orientation="Vertical"> 
      <TextBlock FontSize="28" Margin="20" TextWrapping="WrapWholeWords" Text="{Binding Text}"/> 
      <ListView Grid.Row="2" Margin="0,10" IsItemClickEnabled="True"     
          ItemsSource="{Binding Answers}" 
          SelectedItem="{Binding SelectItem,Mode=TwoWay}" 
          ItemTemplate="{StaticResource AnswerListDataTemplate}" 
         > 
       <i:Interaction.Behaviors> 
        <ic:EventTriggerBehavior EventName="ItemClick"> 
         <ic:InvokeCommandAction Command="{Binding ItemCommand}" CommandParameter="{Binding}" /> 
        </ic:EventTriggerBehavior> 
       </i:Interaction.Behaviors> 
      </ListView> 
     </StackPanel> 
    </DataTemplate> 
    <DataTemplate x:Key="PivotHeaderDataTemplate"> 
     <Border Padding="5" BorderThickness="2" BorderBrush="Gray" Background="{Binding IsCheck ,Converter={StaticResource converter},Mode=TwoWay}"> 
      <TextBlock FontSize="24" > 
       <Run x:Uid="QuestionsPage/QuestionNumber"/> 
       <Run Text="{Binding QuestionNumber}"/> 
      </TextBlock> 
     </Border> 
    </DataTemplate> 
</Page.Resources> 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid Margin="30,50,30,10"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 
     <TextBlock Text=""/> 
     <Pivot Grid.Row="2" 
       x:Name="pivotControl" 

       ItemsSource="{Binding Questions}" 
       ItemTemplate="{StaticResource PivotQuestionDataTemplate}" 
       HeaderTemplate="{StaticResource PivotHeaderDataTemplate}" 
       > 
     </Pivot> 
    </Grid> 
</Grid> 

WaringConverter.cs

public class WaringConverter :IValueConverter 
    { 
     public object Convert(object value, Type targetType, object parameter, string language) 
     { 
      if((bool)value == true) 
      { 
       return new SolidColorBrush(Colors.Green); 
      } 
      else 
      { 
       return new SolidColorBrush(Colors.Gray); 
      } 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, string language) 
     { 
      throw new NotImplementedException(); 
     } 
    }