2011-08-26 12 views
7

Quello che voglio: Vorrei avere uno ScrollView nella mia applicazione Silverlight 4, che si sviluppa in altezza assieme al contenuto, ma fa spettacolo una barra di scorrimento se altrimenti crescesse più in alto del suo contenitore.crescente ScrollView (height = "Auto" MaxHeight = "Stretch")

soluzioni che ho trovato: ho trovato un sacco di domande in cui la soluzione era quella di strech ScrollViewer ma che è non quello che voglio. ScrollViewer dovrebbe essere sempre il più piccolo possibile.

mio problema: per renderlo un po 'più difficile, sulla parte superiore del ScrollViewer un colpo di testa si trova, che è uno StackPanel con altezza statica.

Soluzione approch 1: Ho provato prima con XAML semplice ma smusso capire come dovrebbe funzionare.

<Grid Height="Auto" x:Name="myGrid" > 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100"/> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <StackPanel Grid.Row="0" Background="AliceBlue"> 
     <!-- Dummy Header--> 
    </StackPanel> 

    <ScrollViewer Grid.Row="1" Height="Auto"> 
     <Button Width="100" Height="50" Click="Button_Click" /> 
     <!-- onClick the button will switch between height="600" and height="50" 
      Code: 
      private void Button_Click(object sender, RoutedEventArgs e) 
      { 
       if (sender is Button) 
       { 
        Button btn = (Button)sender; 
        btn.Height = (btn.Height == 50) ? 600 : 50 ; 
       } 
      } 
     --> 
    </ScrollViewer> 
</Grid> 

Se si fa clic sul pulsante diventa superiore e la ScrollViewer saranno tagliati becaus è di altezza. Qualche suggerimento?

soluzione metodo 2: Poi tentato di impostare la * max * Altezza ScrollViewer con l'ActualHeight del contenitore contenente, perciò inseted uno StackPanel intorno ScrollViewer. Funziona nel progettista XAML VS2010 ma non nell'esecuzione del codice. Non ho idea del perché ...

<Grid Height="Auto" x:Name="myGrid" > 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100"/> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 

    <StackPanel Grid.Row="0" Background="AliceBlue"> 
     <!-- Dummy Header--> 
    </StackPanel> 
    <StackPanel Grid.Row="1" x:Name="myStackPanel" Height="Auto" VerticalAlignment="Stretch"> 
     <ScrollViewer Height="Auto" MaxHeight="{Binding ElementName=myStackPanel, Path=ActualHeight}"> 
      <Button Width="100" Height="50" Click="Button_Click" /> 
      <!-- onClick the button will switch between height="600" and height="50" 
       Code: 
       private void Button_Click(object sender, RoutedEventArgs e) 
       { 
        if (sender is Button) 
        { 
         Button btn = (Button)sender; 
         btn.Height = (btn.Height == 50) ? 600 : 50 ; 
        } 
       } 
      --> 
     </ScrollViewer> 
    </StackPanel> 
</Grid> 

Grazie in anticipo!

risposta

6

La soluzione è nell'uso appropriato di VerticalAlignment. Vuoi che la riga Grid che contiene la scrollview sia la dimensione dello spazio rimanente. Non vuoi che lo ScrollViewer occupi tutto quello spazio inizialmente, ma deve essere limitato a quello spazio. Il valore predefinito VerticalAlignment di Stretch avrebbe occupato tutte le dimensioni disponibili. L'utilizzo di Top invece lo farà diventare solo quanto necessario finché il Grid non limiterà le sue dimensioni allo spazio disponibile.

<Grid x:Name="myGrid" > 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100"/> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <StackPanel Grid.Row="0" Background="AliceBlue"> 
     <!-- Dummy Header--> 
    </StackPanel> 
    <ScrollViewer Grid.Row="1" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto"> 
    </ScrollViewer> 
</Grid> 

Tuttavia notare la VerticalScrollBarVisibility che non si include nel proprio XAML nonostante le indicazioni nel testo che dovrebbe. Forse in effetti questo è ciò che sei davvero dopo tutto. Con quello sul posto rimuovi lo VerticalAlignment. A seconda del resto del tuo scenario, potresti scoprire che il bordo del contorno dell'intera estensione dello scrollviewer ha più senso.

+1

Bene, funziona. E la tua spiegazione mi rende totale! Molte grazie! – heynest