Wie kann ich das ändern das VisualState in einer Ansicht aus dem ViewModel?

Ich bin neu in WPF und MVVM. Ich denke, das ist eine einfache Frage. Mein ViewModel ist die Durchführung einer asynchron aufrufen, um die Daten bei einem DataGrid, die gebunden ist an eine ObservableCollection im ViewModel. Wenn die Daten geladen sind, habe ich die richtige ViewModel-Eigenschaft und zeigt das DataGrid die Daten mit kein problem. Jedoch möchte ich Euch einen visuellen Hinweis für den Benutzer, dass die Daten laden. Also, mit Mischung, ich habe dies nur Hinzugefügt, um mein markup:

        <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="LoadingStateGroup">
            <VisualState x:Name="HistoryLoading">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="HistoryGrid">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="HistoryLoaded">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="WorkingStackPanel">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

Ich denke ich weiß, wie ich den Zustand ändern in meinem code-behind (ähnlich):

VisualStateManager.GoToElementState(LayoutRoot, "HistoryLoaded", true);

Jedoch, der Ort, wo ich das tun möchte, ist in der I/O completion " - Methode von meinem ViewModel, die nicht über einen Verweis auf die entsprechende Ansicht. Wie würde ich dies bewerkstelligen mit dem MVVM-Muster?

InformationsquelleAutor Howard Pinsley | 2010-06-15

Können Sie etwas wie das hier tun :

XAML

<Window x:Class="WpfSOTest.BusyWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfSOTest"
    Title="BusyWindow"
    Height="300"
    Width="300">
<Window.Resources>
    <local:VisibilityConverter x:Key="VisibilityConverter" />
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="0">
        <Grid>
            <Border>
                <Rectangle Width="400"
                           Height="400"
                           Fill="#EEE" />
            </Border>
            <Border Visibility="{Binding IsBusy, Converter={StaticResource VisibilityConverter}}">
                <Grid>
                    <Rectangle Width="400"
                               Height="400"
                               Fill="#AAA" />
                    <TextBlock Text="Busy"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center" />
                </Grid>
            </Border>
        </Grid>
    </Border>
    <Border Grid.Row="1">
        <Button Click="ChangeVisualState">Change Visual State</Button>
    </Border>
</Grid>

Code:

public partial class BusyWindow : Window
{
    ViewModel viewModel = new ViewModel();

    public BusyWindow()
    {
        InitializeComponent();

        DataContext = viewModel;
    }

    private void ChangeVisualState(object sender, RoutedEventArgs e)
    {
        viewModel.IsBusy = !viewModel.IsBusy;
    }
}

public class ViewModel : INotifyPropertyChanged
{
    protected Boolean _isBusy;
    public Boolean IsBusy
    {
        get { return _isBusy; }
        set { _isBusy = value; RaisePropertyChanged("IsBusy"); }
    }

    public ViewModel()
    {
        IsBusy = false;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler temp = PropertyChanged;
        if (temp != null)
        {
            temp(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

class VisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        switch (((Boolean)value))
        {
            case true:
                return Visibility.Visible;
        }

        return Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

----------------------- Aktualisierten code -----------------------

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Grid.Row="0">
        <Grid>
            <local:MyBorder IsBusy="{Binding IsBusy}">
                <Grid>
                    <TextBlock Text="{Binding IsBusy}"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center" />
                </Grid>
            </local:MyBorder>
        </Grid>
    </Border>
    <Border Grid.Row="1">
        <Button Click="ChangeVisualState">Change Visual State</Button>
    </Border>
</Grid>

Vorlage

<Style TargetType="{x:Type local:MyBorder}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyBorder}">
                <Border Name="RootBorder">
                    <Border.Background>
                        <SolidColorBrush x:Name="NormalBrush"
                                         Color="Transparent" />
                    </Border.Background>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="CommonGroups">
                            <VisualState Name="Normal" />
                        </VisualStateGroup>
                        <VisualStateGroup Name="CustomGroups">
                            <VisualState Name="Busy">
                                <VisualState.Storyboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="NormalBrush"
                                                        Storyboard.TargetProperty="Color"
                                                        Duration="0:0:0.5"
                                                        AutoReverse="True"
                                                        RepeatBehavior="Forever"
                                                        To="#EEE" />
                                    </Storyboard>
                                </VisualState.Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Benutzerdefiniertes Element

[TemplateVisualState(GroupName = "CustomGroups", Name = "Busy")]
public class MyBorder : ContentControl
{
    static MyBorder()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MyBorder), new FrameworkPropertyMetadata(typeof(MyBorder)));
    }

    public Boolean IsBusy
    {
        get { return (Boolean)GetValue(IsBusyProperty); }
        set { SetValue(IsBusyProperty, value); }
    }

    public static readonly DependencyProperty IsBusyProperty =
        DependencyProperty.Register("IsBusy", typeof(Boolean), typeof(MyBorder), new UIPropertyMetadata(IsBusyPropertyChangedCallback));

    static void IsBusyPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        (d as MyBorder).OnIsBusyPropertyChanged(d, e);
    }

    private void OnIsBusyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (Convert.ToBoolean(e.NewValue))
        {
            VisualStateManager.GoToState(this, "Busy", true);
        }
        else
        {
            VisualStateManager.GoToState(this, "Normal", true);
        }
    }
}

Dies ist eine interessante Technik. Danke. Ich kann diesen Weg nicht gehen-aber ich will zuerst sehen, ob ich irgendwie die Ansicht ändern, die VisualState auf eine Veränderung eine ViewModel-Eigenschaft. Ich denke, das ist der einzige Weg, ich kann tun, animation -- wie fade-ins und-outs basierend auf den Staat.
Ich habe die visibility-Eigenschaft hier, aber was Sie tun können, ist in das benutzerdefinierte Steuerelement erstellen Sie eine Abhängigkeitseigenschaft vom Typ boolean, binden die IsBusy-Eigenschaft auf die Eigenschaft und ändern Sie den visuellen Status in der Steuerung selbst, wenn die änderungen der Eigenschaft auf einen bestimmten Wert.
Diese Antwort ist awesommme!!!

InformationsquelleAutor decyclone

12

Den standard-Weg, dies ist normalerweise eine Eigenschaft, die in der viewmodel (entweder Abhängigkeitseigenschaft oder eine Teilnahme an INotifyPropertyChanged) würde das bedeuten, dass die Daten laden - vielleicht bool IsLoadingData oder ähnliches. Setzen Sie ihn auf true, wenn Sie anfangen zu laden, und legen Sie ihn auf false, wenn Sie fertig sind.

Dann würden Sie binden einen trigger oder visual state-Eigenschaft in der Ansicht, und verwenden Sie die Ansicht, um zu beschreiben, wie der Benutzer, dass die Daten laden.

Dieser Ansatz behält die Trennung, wo das viewmodel ist die logische Darstellung der Ansicht des Benutzers, und nicht brauchen, um teilzunehmen in der eigentlichen Anzeige - oder haben Sie Kenntnis von Animationen, visual states, etc.

Verwendung einer DataStateBehavior zu ändern visual Staaten basiert auf einer Bindung, die in Silverlight:
```
<TheThingYouWantToModify ...>
 <i:Interaction.Behaviors>
   <ei:DataStateBehavior Binding="{Binding IsLoadingData}" Value="true" TrueState="HistoryLoading" FalseState="HistoryLoaded" />
 </i:Interaction.Behaviors>
</TheThingYouWantToModify >
```
- Ich mag diesen Ansatz. Tut mir Leid so unwissend, aber wie binden Sie einen visuellen Zustand zu einer Immobilie?
- Ich glaube, es ist der Unterschied zwischen silverlight und wpf 4. Jedoch, in SL4 können Sie die DataStateBehavior oder eine DataStateSwitchBehavior - nicht viele Beispiele gibt, aber genug, um loszulegen. Sie geben Ihre visuelle Zustände und Interaktion hinzufügen.Verhalten-Knoten, um den Ziel-Kontrollen mit einem datastatebehavior zu ändern, um den Namen visual Zustand ausgelöst, auf eine gebundene Eigenschaft.
InformationsquelleAutor Philip Rieck
2

Was ich getan habe, in der Vergangenheit ist zu erklären, ein Ereignis in meiner VM, auf die der View abonniert. Wenn dann möchte ich darauf hinweisen, dass die busy-Anzeige sollte verschwinden, Hebe ich die Veranstaltung innerhalb der VM.
- Eine Eigenschaft besser ist als ein event für diese.
InformationsquelleAutor Eric Olsson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.