Jak zachować proporcje na skalowalnej, przewijanej zawartości w WPF?

Question

Jestem dość nowy w WPF i natknąłem się na problem, który wydaje się nieco trudny do rozwiązania. Zasadniczo chcę, aby sieć 4x4 była skalowalna, ale zachowuje kwadratowy (lub dowolny inny dowolny) współczynnik proporcji. To naprawdę wydaje się dość trudne, co zaskakuje mnie, ponieważ wyobrażam sobie, że jest to dość powszechny wymóg.

zacznę od definicji siatki jak poniżej:

<Grid> 
    <Grid.RowDefinitions> 
    <Grid.RowDefinition Height="*"/> 
    <Grid.RowDefinition Height="*"/> 
    <Grid.RowDefinition Height="*"/> 
    <Grid.RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
    <Grid.ColumnDefinition Width="*"/> 
    <Grid.ColumnDefinition Width="*"/> 
    <Grid.ColumnDefinition Width="*"/> 
    <Grid.ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinition> 
    ... 
</Grid> 

Teraz jeśli ustawisz że do rozciągnięcia, może wypełnić okno lub cokolwiek pojemnik można umieścić go w rzędy i kolumny są jednolite, ale aspekt. współczynnik nie jest ustalony.

Potem próbowałem umieścić go w StackPanelu, aby wykorzystać dostępne miejsce. Nie pomogło. Co sprawiło, że dotarłem do końca, kiedy przypomniałem sobie o Viewboxes.

<StackPanel Orientation="Horizontal"> 
    <Viewbox> 
    <Grid Height="1000" Width="1000"> <!-- this locks aspect ratio --> 
     <Grid.RowDefinitions> 
     <Grid.RowDefinition Height="*"/> 
     <Grid.RowDefinition Height="*"/> 
     <Grid.RowDefinition Height="*"/> 
     <Grid.RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
     <Grid.ColumnDefinition Width="*"/> 
     <Grid.ColumnDefinition Width="*"/> 
     <Grid.ColumnDefinition Width="*"/> 
     <Grid.ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinition> 
     ... 
    </Grid> 
    </viewbox> 
    <Label HorizontalAlignment="Stretch">Extra Space</Label> 
</StackPanel> 

Teraz moja zawartość skaluje i zachowuje proporcje. Problem polega na tym, że jeśli okno nie jest wystarczająco szerokie, część siatki jest poza ekranem. Chciałbym móc przewinąć do niego, gdyby tak było. Podobnie, potrzebuję minimalnego rozmiaru, co może prowadzić do przewijania w pionie.

Teraz próbowałem umieścić mój StackPanel i Grid (osobno) w odpowiednim kontenerze ScrollViewer, ale wtedy zawartość nie skaluje się już tak, aby pasowała do okna. Przechodzi do pełnego rozmiaru, co nie jest dobre.

Więc jak mam to zrobić? Czy szczerzę złe drzewo? Czy istnieje lepszy/łatwiejszy sposób robienia tego?

Answer 1

Trzeba umieścić zawartość (siatka) wewnątrz ViewBox i ustawić Viewbox.Stretch Property do Stretch.Uniform

Kontrola Viewbox służy do rozciągnąć lub przeskalować element podrzędny i pozwala kontrolować sposób, w jaki dziecko jest rozciągnięty. Sprawdź tutaj examples.

alt text http://i.msdn.microsoft.com/ms635549.img_mmgraphics_stretchenum(en-us,VS.90).jpg

Answer 2

umieścić 0,25 * zamiast * dla każdej kolumny i RowWidth

Answer 3

Czy ustawienie SizeToContent = „WidthAndHeight” w oknie daje zachowanie jesteś po?

Answer 4

W tym przypadku najlepiej jest UniformGrid. Jest to przydatne tylko w przypadku sieci NxN.