C# WPF XAML 小地圖

Question

如何在 Visual Studio Code、Visual Studio、Sublime Text 中構建小地圖？

小地圖

我有 2 個水平 StackPanel。

頂部：帶有內容的 StackPanel

底部：高度為 100 的 Minimap StackPanel 僅以縮影形式顯示頂部 StackPanel 中的內容，而無需添加頂部 StackPanel 中的相同內容。

<Grid>

    <ScrollViewer
        x:Name="scrollViewer"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollBarVisibility="Disabled">
        <WrapPanel
            x:Name="wrapPanel"
            Orientation="Horizontal"
            Margin="0,0,0,100" />
    </ScrollViewer>

    <ScrollViewer
        x:Name="scrollViewerMiniMap"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollBarVisibility="Disabled"
        VerticalAlignment="Bottom"
        Height="100">
        <WrapPanel
            x:Name="wrapPanelMiniMap"
            Orientation="Horizontal" />
    </ScrollViewer>

</Grid>

我怎樣才能做到這一點？

Answer 1

只需從內容創建一個VisualBrush ，例如使用內容的根容器。 覆蓋ScrollViewer的默認樣式以使用VisualBrush繪制軌道的背景。

要創建簡單的動態預覽，只需使用Rectangle並將Fill設置為VisualBrush 。 如果您想允許調整ViewBox內的Rectangle的大小。

要獲得具有正確縱橫比的初始寬度，只需將Rectangle綁定到用作VisualBrush的Visual的容器元素的ActualWidth和ActualHeight ：

<Grid>
  <Grid.Resources>
    <VisualBrush x:Key="VisualBrush" 
                 Visual="{Binding ElementName=StackPanel}"/>
  </Grid.Resources>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <StackPanel x:Name="StackPanel" 
              Orientation="Horizontal">
    <StackPanel>
      <TextBlock Text="ComboBox1 Label" />
      <ComboBox />
    </StackPanel>
    <StackPanel>
      <TextBlock Text="ComboBox2 Label" />
      <ComboBox />
    </StackPanel>
  </StackPanel>

  <Viewbox Grid.Row="1">
    <Rectangle Width="{Binding ElementName=StackPanel, Path=ActualWidth}"
               Height="{Binding ElementName=StackPanel, Path=ActualHeight}"
               Fill="{StaticResource VisualBrush}" />
  </Viewbox>
</Grid>