Ändern der Randstärke auf Maus über UWP

Question

Ich entwerfe Menü und ich habe eine Liste von Elementen in VariableSizedWrapGrid, wie in Abbildung gezeigt. Ich möchte Randstärke des aktuellen aktiven Elements auf MouseOver auch ändern Ich möchte Vordergrundfarbe des Titels "Business" ändern. Wie soll ich dies in UWP mit MVVM erreichen?

Way ich weiß, ist:

1. Verwenden Interaktion und rufen Ansichtsmodell Befehl auf MoseOver.

2. Befehl gesetzt Border Eigenschaft Ansichtsmodell

3. Border Eigenschaft BorderThickness Eigenschaft Steuer binden würde

   BorderThickness = "{Binding Border}"

Dies wird große Arbeit mit ein Element der VariableSizedWrapGrid. Aber ich habe 3 Gegenstände wie oben gezeigt. Muss ich 3 Befehle mit 3 ViewModel Properties erstellen, die die Randstärke an das jeweilige Objekt binden?

Answer 1

Es sei denn, wenn Sie einen guten Grund haben die BorderWidth aus Ihrem Viewmodel (zB berechneten Breite abhängig von anderen Eigenschaften Ihres Ansichtsmodell/Modell zu setzen, können Sie einfach den Standard GridViewItem Stil bearbeiten und die VisualStateManager verwenden, um das PointerOver Ereignis zu behandeln .

Sie die Standardformate auf Ihrer Festplatte

C, mit einer Datei pro SDK-Version finden Sie unter:. \ Program Files (x86) \ Windows- Kits \ 10 \ Designtime \ CommonConfiguration \ Neutral \ UAP \ 10.0.10240.0 \ Generic \ generic.xaml C: \ Program Files (x86) \ Windows- Kits \ 10 \ Designtime \ CommonConfiguration \ Neutral \ UAP \ 10.0.10586.0 \ Generisches \ generic.xaml

Oder Sie können sie auch auf MSDN, wie die finden eine für GridViewItem. Sie können auch edit the existing style in Blend.

Sie werden mit einem benutzerdefinierten Stil mit einem Namen (x: Key) enden, den Sie auf Ihrem VariableSizedGrid 's verwenden können. Der Teil im Stil, die Sie bearbeiten müssen, ist im PointerOver visuellen Zustand:

<VisualState x:Name="PointerOver"> 
    <Storyboard> 
     <DoubleAnimation Storyboard.TargetName="BorderRectangle" 
         Storyboard.TargetProperty="Opacity" 
         Duration="0" 
         To="1"/> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Stroke"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Stroke"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
     </ObjectAnimationUsingKeyFrames> 
     <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
    </Storyboard> 
    </VisualState> 

Wie Sie sehen können, bereits der Staat eine andere DoubleAnimation für die BorderThickness Eigenschaften der Opacity und Stroke, fügen Sie einfach ändert. Andere Staaten verwenden den Standard.