none
GridView Elemente dynamisch ein- und ausblenden RRS feed

  • Frage

  • Hallo zusammen!

    Ich habe eine Anwendung in einem Fenster von variabler Größe (zB durch "Verkleinern, "Maximieren") und in diesem Fenster ist ein UserControl eingebunden. In diesem UserControl wiederum befinden sich verschiedene GridView-Elemente mit untergeordneten Steuerelementen.

    Meine Frage: Wie können die Steuerelemente je nach Fenstergröße ein- bzw. ausgeblendet werden?

    Im konkreten Fall ist das Steuerelement ein Slider, welcher mit dem Grid variabel schrumpft. Da dies nur bis zu einer bestimmten Größe des Fensters sinnvoll darzustellen ist, möchte ich den Slider zB ab vorab definierten Width/ Heigth-Werten ausblenden (Hidden/ Collapsed) und beim vergrößern des Fensters wieder darstellen. Hat da jemand eine Idee oder Ansatz?

    Ich bin für jede Hilfe dankbar!

    mfG Nikola

    vereinfachte Anschauung:

    <Grid Margin="200" Width="200" Height="100">
    		<Grid.RowDefinitions>
    			<RowDefinition Height="1*"/>
    			<RowDefinition Height="1*"/>
    		</Grid.RowDefinitions>
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="1*"/>
    			<ColumnDefinition Width="1*"/>
    		</Grid.ColumnDefinitions>			
    
    		<Slider Height="29" Margin="0" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center"/>
    			
    </Grid>

    Dienstag, 14. Februar 2012 13:06

Antworten

  • Hi,

    zuerst stellt sich mir doch die Frage, warum Teile vom UI einfach weggelassen werden können. Wenn Sie entbehrlich sind, sind sie es vielleicht komplett? Zudem gibt es die Properties MinWidth und MinHeight, mit denen man ein zu klein gemachtes Fenster verhindern kann.

    Und nun zur technischen Lösung des Problems.  Ich würde eine Helferklasse bauen, die abhängig vom Unterschreiten eines Schwellwertes einen Schalter (bool) umlegt. Diese kann über "attached Properties" an die zu 'schaltenden' UI-Elemente gehängt werden.

    Die Helferklasse (C#):

    public static class ThresholdHelper
    {
       public static double GetThreshold(DependencyObject obj)
       {
          return (double)obj.GetValue(ThresholdProperty);
       }
    
       public static void SetThreshold(DependencyObject obj, double value)
       {
          obj.SetValue(ThresholdProperty, value);
       }
    
       public static readonly DependencyProperty ThresholdProperty =
           DependencyProperty.RegisterAttached(
             "Threshold",
             typeof(double),
             typeof(ThresholdHelper),
             new UIPropertyMetadata(0d));
    
       public static double GetObservedValue(DependencyObject obj)
       {
          return (double)obj.GetValue(ObservedValueProperty);
       }
    
       public static void SetObservedValue(DependencyObject obj, double value)
       {
          obj.SetValue(ObservedValueProperty, value);
       }
    
       public static readonly DependencyProperty ObservedValueProperty =
           DependencyProperty.RegisterAttached(
             "ObservedValue",
             typeof(double),
             typeof(ThresholdHelper),
             new UIPropertyMetadata(0d, OnObservedValueChanged));
    
       private static void OnObservedValueChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
       {
          double newValue = (double)e.NewValue;
          bool isBelowThreshold = (newValue < GetThreshold(sender));
          sender.SetValue(IsBelowThresholdProperty, isBelowThreshold);
       }
    
       public static bool GetIsBelowThreshold(DependencyObject obj)
       {
          return (bool)obj.GetValue(IsBelowThresholdProperty);
       }
    
       public static void SetIsBelowThreshold(DependencyObject obj, bool value)
       {
          obj.SetValue(IsBelowThresholdProperty, value);
       }
    
       public static readonly DependencyProperty IsBelowThresholdProperty =
           DependencyProperty.RegisterAttached(
             "IsBelowThreshold",
             typeof(bool),
             typeof(ThresholdHelper),
             new UIPropertyMetadata(false));
    }
    Die Verwendung im UI (XAML):
    <button Content="click me...">
       <button.style>
          <style TargetType="Button">
             <Setter
                Property="local:ThresholdHelper.Threshold"
                Value="400" ></Setter>
             <Setter
                Property="local:ThresholdHelper.ObservedValue"
                Value="{Binding Path=Width, ElementName=TheWindow}" ></Setter>
             <Style.Triggers>
                <Trigger
                   Property="local:ThresholdHelper.IsBelowThreshold"
                   Value="True">
                   <Trigger.Setters>
                      <Setter
                         Property="Visibility"
                         Value="Collapsed" ></Setter>
                   </Trigger.Setters>
                </Trigger>
             </Style.Triggers>
          </style>
       </button.style>
    </button>

    Die Helferklasse prüft, ob ein individuell definierbarer Schwellwert unterschritten wird und zeigt dies über die DP "IsBelowThreshold" an. Diese wiederum steuert über einen Trigger die Sichtbarkeit des Buttons.

    Wenn Du den Button in ein Fentser "TheWindow" einfügst und den Namespace "local" auf den Namespace der Helferklasse einstellst, kannst Du sofort loslegen. Wenn das Fenster auf weniger als 400 Px Breite verkleinert wird, verschwindet der Button; beim Vergrößern taucht er wieder auf. Der "Threshold" kann für verschiedene UI-Elemente individuell eingestellt werden.

    Ich hoffe, es hilft. Sonst frag noch mal.

    Gruß
    Jürgen


    Freitag, 17. Februar 2012 16:03

Alle Antworten

  • Hi,

    zuerst stellt sich mir doch die Frage, warum Teile vom UI einfach weggelassen werden können. Wenn Sie entbehrlich sind, sind sie es vielleicht komplett? Zudem gibt es die Properties MinWidth und MinHeight, mit denen man ein zu klein gemachtes Fenster verhindern kann.

    Und nun zur technischen Lösung des Problems.  Ich würde eine Helferklasse bauen, die abhängig vom Unterschreiten eines Schwellwertes einen Schalter (bool) umlegt. Diese kann über "attached Properties" an die zu 'schaltenden' UI-Elemente gehängt werden.

    Die Helferklasse (C#):

    public static class ThresholdHelper
    {
       public static double GetThreshold(DependencyObject obj)
       {
          return (double)obj.GetValue(ThresholdProperty);
       }
    
       public static void SetThreshold(DependencyObject obj, double value)
       {
          obj.SetValue(ThresholdProperty, value);
       }
    
       public static readonly DependencyProperty ThresholdProperty =
           DependencyProperty.RegisterAttached(
             "Threshold",
             typeof(double),
             typeof(ThresholdHelper),
             new UIPropertyMetadata(0d));
    
       public static double GetObservedValue(DependencyObject obj)
       {
          return (double)obj.GetValue(ObservedValueProperty);
       }
    
       public static void SetObservedValue(DependencyObject obj, double value)
       {
          obj.SetValue(ObservedValueProperty, value);
       }
    
       public static readonly DependencyProperty ObservedValueProperty =
           DependencyProperty.RegisterAttached(
             "ObservedValue",
             typeof(double),
             typeof(ThresholdHelper),
             new UIPropertyMetadata(0d, OnObservedValueChanged));
    
       private static void OnObservedValueChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
       {
          double newValue = (double)e.NewValue;
          bool isBelowThreshold = (newValue < GetThreshold(sender));
          sender.SetValue(IsBelowThresholdProperty, isBelowThreshold);
       }
    
       public static bool GetIsBelowThreshold(DependencyObject obj)
       {
          return (bool)obj.GetValue(IsBelowThresholdProperty);
       }
    
       public static void SetIsBelowThreshold(DependencyObject obj, bool value)
       {
          obj.SetValue(IsBelowThresholdProperty, value);
       }
    
       public static readonly DependencyProperty IsBelowThresholdProperty =
           DependencyProperty.RegisterAttached(
             "IsBelowThreshold",
             typeof(bool),
             typeof(ThresholdHelper),
             new UIPropertyMetadata(false));
    }
    Die Verwendung im UI (XAML):
    <button Content="click me...">
       <button.style>
          <style TargetType="Button">
             <Setter
                Property="local:ThresholdHelper.Threshold"
                Value="400" ></Setter>
             <Setter
                Property="local:ThresholdHelper.ObservedValue"
                Value="{Binding Path=Width, ElementName=TheWindow}" ></Setter>
             <Style.Triggers>
                <Trigger
                   Property="local:ThresholdHelper.IsBelowThreshold"
                   Value="True">
                   <Trigger.Setters>
                      <Setter
                         Property="Visibility"
                         Value="Collapsed" ></Setter>
                   </Trigger.Setters>
                </Trigger>
             </Style.Triggers>
          </style>
       </button.style>
    </button>

    Die Helferklasse prüft, ob ein individuell definierbarer Schwellwert unterschritten wird und zeigt dies über die DP "IsBelowThreshold" an. Diese wiederum steuert über einen Trigger die Sichtbarkeit des Buttons.

    Wenn Du den Button in ein Fentser "TheWindow" einfügst und den Namespace "local" auf den Namespace der Helferklasse einstellst, kannst Du sofort loslegen. Wenn das Fenster auf weniger als 400 Px Breite verkleinert wird, verschwindet der Button; beim Vergrößern taucht er wieder auf. Der "Threshold" kann für verschiedene UI-Elemente individuell eingestellt werden.

    Ich hoffe, es hilft. Sonst frag noch mal.

    Gruß
    Jürgen


    Freitag, 17. Februar 2012 16:03
  • Hallo Nikola_580,

    Ich gehe davon aus, dass die Antwort Dir weitergeholfen hat.
    Solltest Du noch "Rückfragen" dazu haben, so gib uns bitte Bescheid.

    Grüße,
    Robert


    Robert Breitenhofer, MICROSOFT  Twitter Facebook
    Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip „Entwickler helfen Entwickler“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden können.

    Donnerstag, 1. März 2012 16:47
    Moderator