C# WPF XAML Minimap

Question

How I can build a minimap like in Visual Studio Code, Visual Studio, Sublime Text?

Minimap

I have 2 horizontal StackPanels.

Top: StackPanel with content

Bottom: Minimap StackPanel with Height 100 just shows the content from the top StackPanel in miniature without adding the same content from the top 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>

How I can achieve this?

Answer 1

Just create a VisualBrush from the content eg using the root container of the content. Override the default style for the ScrollViewer to paint the background of the track with the VisualBrush .

To create a simple dynamic preview just use a Rectangle and set Fill to the VisualBrush . If you want to allow resizing host the Rectangle inside a ViewBox .

To get an initial width with the correct aspect ratio just bind the Rectangle to the ActualWidth and ActualHeight of the container element that serves as the Visual for the VisualBrush :

<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>