Wie verwendet man GoToState mit DataTemplate in der METRO-App

Question

In meiner Page.Resources habe ich DataTamplate:

<DataTemplate x:Key="gridviewQuestStyle">
        <Button Content="{Binding QuestNumb}" Style="{StaticResource buttonQuestStyle}"> 
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="questionStates">                        
                    <VisualState x:Name="Right">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="LightGreen" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Wrong">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="Red" />
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Button.Background>
                <SolidColorBrush x:Name="BackgroundBrush" Color="Black"/>
            </Button.Background>
        </Button>
    </DataTemplate>

Dann erstelle ich GridView:

<GridView Grid.Row="0" x:Name="GridView_ButtonsQuest"
    ItemTemplate="{StaticResource gridviewQuestStyle}"
    ItemsSource="{Binding Questions}" >
</GridView>

Fragen ist eine Liste:

public class Question
{
    public string QuestNumb { get; set; }
    public string QuestText { get; set; }
}

Die Logik meiner Anwendung ist:

    if(isAnswerRight)
{
  VisualStateManager.GoToState(???, "Right", false);
}
else
{
  VisualStateManager.GoToState(???, "Wrong", false);
}

Bitte erklären Sie, was ich im ersten Parameter der GoToState-Methode benötige?

Answer 1

Wenn der VisualState Switch in der .cs-Datei für eine Seite oder ein UserControl (nicht in einem MVVM-Ansichtsmodell) auftritt. Anwenden einer Name-Eigenschaft auf die GridView

<GridView Grid.Row="0" x:Name="GridView_ButtonsQuest"
    ItemTemplate="{StaticResource gridviewQuestStyle}"
    ItemsSource="{Binding Questions}" 
    x:Name="myStateChanges" >
</GridView>

und dann in die Methode GoToState() stecken.

if(isAnswerRight)
{
  VisualStateManager.GoToState(this.myStateChanges, "Right", false);
}
else
{
  VisualStateManager.GoToState(this.myStateChanges, "Wrong", false);
}

Answer 2

Hatte das gleiche Problem mit einem Listview. Es ist möglich, das Steuerelement innerhalb der Vorlage zu erhalten, indem Sie ItemContainerGenerator und VisualTreeHelper

foreach (var item in GridView_ButtonsQuest.Items)
{
    var gridItem = (GridViewItem)MyList.ItemContainerGenerator.ContainerFromItem(item);
    var wrap1 =VisualTreeHelper.GetChild(gridItem , 0);
    var wrap2 = VisualTreeHelper.GetChild(wrap1 , 0);
   ...

Ich habe xmalspy verwendet, um herauszufinden, in wie viele Schichten das Steuerelement verpackt ist. Sollte möglich sein, etwas zu bauen, das dies rekursiv tut.

Das nächste Problem, das ich hatte, ist, dass man GoToState nicht mit einem Gitter oder einer Schaltfläche verwenden kann. Aber jemand hatte sich die Zeit genommen, einen ExtendedVisualStateManager zu entwickeln, der das unterstützt, siehe http://social.msdn.microsoft.com/Forums/en-GB/winappswithcsharp/thread/24dc19ff-15ed-4170-b3c3-d313728b642b

dann können Sie ExtendedVisualStateManager.GoToElementState(...) schreiben