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?
Just create a VisualBrush from the content e.g. 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>
Related
I have a Page that allow the user to load multiple images thumbnails from his folders.
The number of rows update nicely when the width of the window is changed
The only thing that I could not figure out how to make it work is having the vertical scroll bars, I pretty much tried every settings possible.
At first my root was a stackPanel so I switched to a Grid to see if there would be any difference.
here is my xaml
<Page
x:Class="IMG.Pages.UploadPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:img="using:IMG"
xmlns:local="using:IMG.Pages"
xmlns:Models="using:IMG.Models"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Padding="2"
BorderBrush="Black"
BorderThickness="1"
Orientation="Horizontal">
<Button Click="GetPhoto" Content="get images" />
</StackPanel>
<GridView x:Name="ImageGrid" Width="Auto" Background="LightBlue" Grid.Row="1" Margin="5" Height="Auto"
SizeChanged="ImageGridSizeChanged"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:Name="ImgThumbnail" x:DataType="Models:ImageData">
<StackPanel
Width="100"
Height="120"
Margin="5"
AutomationProperties.Name="{x:Bind Hash}">
<StackPanel Margin="1">
<TextBlock Text="{x:Bind File}" />
</StackPanel>
<Image x:Name="thumbIMG" Width="80" Height="100" Stretch="UniformToFill" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
At first the gridview is empty, the user click on the button and then in the FileOpenPicker he can choose multiple images and they are added as thumbnail binded to an ObservableList of ImageData
The binding work nicely, I am simply stuck on the scrollbar
I have experienced the same issue and I fixed it by setting the height of the gidview on the fix size instead of auto. And than you can set
ScrollViewer.VerticalScrollBarVisibility = "Visible"
ScrollViewer.VerticalScrollMode = "Enable"
I'm trying to create a drawing surface within a Template 10 UWP Hamburger template app with a template image in the background. Is there any way to force the main visual space to be non-scrollable? When I use the following XAML, the image expands off the screen as I stretch the app window wider.
<!-- content -->
<StackPanel EntranceNavigationTransitionInfo.IsTargetElement="True"
Padding="12,8,0,0"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="pageHeader">
<StackPanel Orientation="Horizontal">
<ComboBox Name="TemplateComboBox" ItemsSource="{x:Bind _templates}" SelectionChanged="TemplateComboBox_SelectionChanged" PlaceholderText="Select a template...">
<ComboBoxItem Content="{Binding}" />
</ComboBox>
<TextBlock x:Name="stateTextBox"
Margin="16,0,0,0"
Text="Current Visual State" />
</StackPanel>
<Grid Name="DrawingGrid" Margin="0,5,5,5" >
<Image Name="TemplateImage" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Stretch="Uniform" />
</Grid>
</StackPanel>
There is code in the code-behind to set the Image source as the combo selection changes. I just want the image to stretch to the current viewable area.
sigh Haven't even started with the Ink yet :(
You could think about detecting the visible area's width and height, then set the width and height as your image control's width and height.
<Grid EntranceNavigationTransitionInfo.IsTargetElement="True"
Padding="12,8,0,0"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="pageHeader">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="9*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<ComboBox Name="TemplateComboBox" PlaceholderText="Select a template...">
<ComboBoxItem Content="{Binding}" />
</ComboBox>
<TextBlock x:Name="stateTextBox"
Margin="16,0,0,0"
Text="Current Visual State" />
</StackPanel>
<Grid Margin="0,5,5,5" x:Name="grid" Grid.Row="1">
<ScrollViewer Name="scrollviewer" Width="{Binding ElementName=grid,Path=Width}" Height="{Binding ElementName=grid,Path=Height}" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<Image Name="TemplateImage" VerticalAlignment="Stretch" Source="/Assets/pic.jpg" HorizontalAlignment="Stretch" Stretch="Uniform" />
</ScrollViewer>
</Grid>
</Grid>
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
TemplateImage.Width = scrollviewer.ViewportWidth;
TemplateImage.Height = scrollviewer.ViewportHeight;
}
I have the following MainPage.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<RelativePanel>
<Button Name="btnHamburger" FontFamily="Segoe MDL2 Assets" Content="" Click="HamburgerButton_Click" RelativePanel.AlignLeftWithPanel="True"/>
<TextBlock Name="PageTitle" Text="Title" FontSize="24" FontWeight="Bold" RelativePanel.AlignHorizontalCenterWithPanel="True"/>
</RelativePanel>
<SplitView Name="MySplitView" Grid.Row="1" DisplayMode="Overlay" OpenPaneLength="170" CompactPaneLength="56" HorizontalAlignment="Left">
<SplitView.Pane>
<StackPanel Orientation="Vertical">
<TextBlock Text="Skyron Image" FontSize="16" VerticalAlignment="Center" />
<ListBox SelectionMode="Single" Name="IconsListBox" SelectionChanged="IconsListBox_SelectionChanged">
</ListBox>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame" />
</SplitView.Content>
</SplitView>
</Grid>
It gives me a navigation menu system. When I click on of the navigation links, I load the corresponding page into the Frame MyFrame.
This is my HomePage
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Home page" Name="tbHome" />
</Grid>
As you can see, I've tried to achieve my desired outcome by setting HorizontalAlignment="Stretch" on the grid and setting a column definition to auto.
I guess the issue is that I don't have enough content in the grid to make it full screen. This is what I currently have:
I have made the homepage background blue - as you can see, it doesn't fill the entire screen.
How can I achieve what I want, without setting a width on the Grid - as this won't work with different sized phones/screens.
EDIT:
I've just relised the width of the content is being controlled by the OpenPaneLength="170" setting. Why does this effect the content and how can I stop it effecting the content width?
Set the HorizontalAlignment property of the SplitView to "Stretch" instead of "Left".
I'm trying to build a kind of Wizard with a ScatterViewItem. In the lower area are buttons for Next, Back and Cancel. When pressing on the Next or Back button the upper part should show the next 'page'. I've tried using a DataTemplate, but the DataTemplate is not showing in the upper area. I get only a blank area.
I'm still new to WPF and Surface and maybe try something that did not work. May you have better ideas.
Here's the code:
<s:SurfaceWindow.Resources>
<DataTemplate x:Key="LoadProject">
<StackPanel Orientation="Vertical">
<Label Name="lbl_Database" Content="Database" />
<s:SurfaceTextBox Name="txt_Database"/>
<Label Name="lbl_Project" Content="Project" />
<s:SurfaceTextBox Name="txt_Project"/>
</StackPanel>
<DataTemplate x:Key="LoadProject">
</s:SurfaceWindow.Resources>
<s:ScatterView>
<s:ScatterViewItem Width="300" Height="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<ItemsControl x:Name="DynamicArea" ItemTemplate="{StaticResource LoadProject}" Grid.Column="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<s:SurfaceButton Name="btn_Next" Content="Next" />
<s:SurfaceButton Name="btn_Back" Content="Back" />
<s:SurfaceButton Name="btn_Cancel" Content="Cancel" />
</StackPanel>
</Grid>
</s:ScatterViewItem>
</s:ScatterView>
I am trying to format the scroll view to completely occupy the parent container, but it looks like I'm missing something. Any suggestions would be great.
XAML:
<Border Grid.Row="0" BorderBrush="#1B5468" BorderThickness="3,3,3,3" CornerRadius="7,7,7,7" Margin="5,0,5,5">
<StackPanel Height="Auto" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<StackPanel HorizontalAlignment="Center" Width="350" Height="30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="../Images/Blue.png" Stretch="Fill" Margin="7,0,5,-27" Height="52" />
<TextBlock HorizontalAlignment="Center" Height="Auto" Margin="36,3,-2,4" Name="lblHeader" Text="Comments" VerticalAlignment="Center" Width="Auto" Foreground="Silver" FontWeight="Bold" FontSize="12" />
</Grid>
</StackPanel>
<ScrollViewer Height="Auto" HorizontalAlignment="Stretch" Name="dComments_Scroll" VerticalAlignment="Stretch" Width="Auto" HorizontalContentAlignment="Left" VerticalContentAlignment="Top">
<StackPanel Height="Auto" Name="dStack_Comments" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" UseLayoutRounding="False">
</StackPanel>
</ScrollViewer>
</StackPanel>
</Border>
By putting your ScrollViewer in a StackPanel, you're saying "make this ScrollViewer just tall enough to hold its content". That's what StackPanel is designed to do -- to make each child exactly as tall as it needs to be to show all its content, and then stack the next child right underneath. If that's not the layout you want, don't use a StackPanel.
Edit: Instead of a StackPanel inside your Border, you probably want a Grid. (I originally wrote DockPanel, forgetting that Silverlight doesn't ship with a DockPanel.) Grid is flexible enough to let you have some controls autosized, and other controls filling (or sharing) the remainder of the available space.
<Border ...>
<Grid ...>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" ...>
...
</StackPanel>
<ScrollViewer Grid.Row="1" ...>
...
</ScrollViewer>
</Grid>
</Border>
Also, once you get it working, I'd strongly suggest that you see if you can simplify your XAML. You're setting a lot of properties to their default values (e.g. HorizontalAlignment="Stretch", Height="Auto"), which just makes your XAML harder to read and maintain. If you can start to learn which attributes you can remove and still keep the same behavior, you'll have a much better handle on XAML development.