Develop Reference

User control Changing size when In ViewBox

I have a user control(Windows 8.1 app) which I have developed using PATH vector control. I have put it inside a ViewBox . The problem is , when I change the screen resolution or even orientation , the Control either get reduced or get too much big.
I want to give it a fixed size so whatever the screen resolution is or orientation is, It shouldnt increase the size .
The XAML for my user control is
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="200">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" >
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
<Border.Background>
<ImageBrush x:FieldModifier="public" x:Name="image1" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>

If the only thing in the Viewbox is your user control, just get rid of the Viewbox, it stretches and scales the content by design!
If you have various controls in your Viewbox but you you only want some of them to resize, you might be better changing your layout to use a grid and only wrapping the stuff you want to resize in a Viewbox.
Here is an example of a 3x3 grid with 6 textboxes, 5 fixes size, 1 dynamic (in a Viewbox):
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="1" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="2" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="1" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="2" Grid.Column="0" Text="Fixed Size"></TextBox>
<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<TextBox Text="Dynamic"/>
</Viewbox>
</Grid>

Some controls are not stretching [duplicate]

This question already has an answer here:
WPF Grid horizontalalignment doesn't work. Sizes don't changes
(1 answer)
Closed 8 years ago.
In this window I have many different controls and I want to stretch which is possible
but there are some controls by 'stackGroup', 'listBox1', 'listBox2' that don't stretching.. Why ??
Also is this way i right to do this kind of pages
<Window x:Class="TwoColumnGridSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Window_Loaded"
Title="Window1" Height="759" Width="800">
<Grid Margin="0,0,0,95">
<Grid.RowDefinitions>
<RowDefinition Height="509"></RowDefinition>
<RowDefinition Height="111"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="472" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="165" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Stretch" Margin="0,0,0,163">
<ListBox Name="listBox1" SelectedItem="{Binding SelectedItem}" Width="165" ItemsSource="{Binding Buttons}" SelectionChanged="ListBox_SelectionChanged" HorizontalContentAlignment="Left" VerticalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding .}" Click="Button_Click" Style="{StaticResource listboxbuttons}"></Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Name="stackGroup" HorizontalAlignment="Stretch" Grid.Column="1" Height="457" VerticalAlignment="Top" >
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="460" Margin="0,0,10,0" >
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="24" />
<RowDefinition Height="316"/>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Image x:Name="imageMap" Source="Resources/images.jpg" HorizontalAlignment="Stretch" Grid.Row="0" Stretch="Fill" Margin="2,0,0,0" />
<Border BorderBrush="Green" BorderThickness="3" CornerRadius="1,1,1,1" Margin="2,4,0,17" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2">
<Grid Grid.Row="1" Margin="3,3,3,3">
<GroupBox Header="Club Badge" HorizontalAlignment="Left" VerticalAlignment="Top" Height="123" Width="134"/>
<GroupBox Header="Goalie" HorizontalAlignment="Left" VerticalAlignment="Top" Height="179" Width="134" Margin="0,128,0,0"/>
<GroupBox Header="Defender" HorizontalAlignment="Left" Margin="139,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="MidFielder" HorizontalAlignment="Left" Margin="278,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="GroupBox" HorizontalAlignment="Left" Margin="417,0,0,0" VerticalAlignment="Top" Height="307" Width="155"/>
</Grid>
</Border>
<ProgressBar BorderBrush="#FF6081B0" HorizontalAlignment="Stretch" Margin="2,303,0,43" Value="45" Grid.Row="2" Foreground="#FF6081B0" Grid.RowSpan="2" />
</Grid>
</StackPanel>
</Grid>
<ListBox Height="96" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Bottom" Name="listBox2" Width="782" Grid.RowSpan="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="30 0 30 0" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem Content="Vertical Item 1" />
<ListBoxItem Content="Vertical Item 2" />
<ListBoxItem Content="Vertical Item 3" />
<ListBoxItem Content="Vertical Item 4" />
<ListBoxItem Content="Vertical Item 5" />
</ListBox>
</Grid>
</Window>

Same answer as in this question. StackPanel will not respect stretch alignments in the same direction as its orientation. So a StackPanel whose orientation is vertical will not respect a VerticalAlignment of stretch for a child.
listBox1 doesn't stretch because it's VerticalAlignment is stretch and it's container StackPanel has an orientation of Vertical (that's its default). You could change that StackPanel to be horizontal, replace it with another container (such as a DockPanel), or remove it entirely since it only contains one element.
Similar reasoning can be applied to your other issues

Aligning ListBox ContentControl to the right - C# WPF

I have a ListBox with text and a corresponding Image. I would Like the Image to align right. How would i alter my XAML to achieve this? We are mainly looking at lbxBuiltInLevels. Thanks.
<Page x:Class="TheseusAndTheMinotaur.ChooseLevelPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="TheseusAndTheMinotaur"
mc:Ignorable="d"
Title="ChooseLevelPage">
<Grid Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="/TheseusAndTheMinotaur;component/Images/MainBackground.jpg"/>
</Grid.Background>
<ListBox x:Name="lbxLevels" HorizontalAlignment="Left" Height="100" Margin="10,78,0,0" VerticalAlignment="Top" Width="100"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" Margin="10,208,0,0" VerticalAlignment="Top" Width="75" Click="btnExit_Click"/>
<Button x:Name="btnLoad" Content="Load" HorizontalAlignment="Left" Margin="10,183,0,0" VerticalAlignment="Top" Width="75" Click="btnLoadCustomLevel_Click"/>
<Label x:Name="lblSavedLevels" Content="Custom Levels" HorizontalAlignment="Left" Margin="10,20,0,0" VerticalAlignment="Top" FontSize="34" FontFamily="Papyrus" FontWeight="ExtraBold"/>
<Label x:Name="lblBuiltInLevels" Content="Built-in Levels" Grid.Column="1" HorizontalAlignment="Left" Margin="44,20,0,0" VerticalAlignment="Top" FontSize="34" FontWeight="ExtraBold" FontFamily="Papyrus"/>
<ListBox x:Name="lbxBuiltInLevels" Grid.Column="1" Margin="10,78,0,0" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid x:Name="gridForLevels">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="3" Text="{Binding Str}"/>
<ContentControl Grid.Column="1" Margin="0,0,10,0" Content="{Binding Image}" HorizontalAlignment="Right" HorizontalContentAlignment="Right" FlowDirection="RightToLeft"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page>

Set this code in your listbox:
HorizontalContentAlignment="Stretch"
Should look like:
<ListBox x:Name="lbxBuiltInLevels" Grid.Column="1" HorizontalContentAlignment="Stretch" Margin="10,78,0,0" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"

ScrollViewer does not scroll Image WPF

I have an image that is bigger than it's window container and it is placed in a ScrollViewer, however, the image does not scroll at all. I've tried putting the image in a container with no luck. What settings am I missing here? (I copied the code straight from MS, but they have it wrong)
Here's the code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:h="http://helixtoolkit.codeplex.com" x:Class="TileLayout"
Title="TileLayout" Height="1000" Width="845" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow">
<StackPanel HorizontalAlignment="center" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" >
<TextBox x:Name="txtSourceFilePath" Width="500" Margin="10" Height="22" TextChanged="TextBox_TextChanged" Text="E:\projects\Test3D\SavedSnapshots\snapshot.png"/>
<Button x:Name="btnPickFile" Width="100" Margin="0,10,10,10" Content="Pick File" ></Button>
</StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<Image x:Name="imgFinal" Source="SteelMotion_chevron2.png"/>
</ScrollViewer>
</StackPanel>

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:h="http://helixtoolkit.codeplex.com" x:Class="TileLayout"
Title="TileLayout" Height="1000" Width="845" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Height="50" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="0">
<TextBox x:Name="txtSourceFilePath" Width="500" Margin="10" Height="22" TextChanged="TextBox_TextChanged" Text=""/>
<Button x:Name="btnPickFile" Width="100" Margin="0,10,10,10" Content="Pick File" ></Button>
</StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" >
<Image x:Name="imgFinal" Source="SteelMotion_chevron2.png" Width="768" Height="1408"/>
</ScrollViewer>
</Grid>

You need to specify the size of the ScrollViewer.
In this case ScrollViewer and Image are same size, so the scroll bar does not show.

The ScrollViewer does not scroll

I would like to have an interface with 3 components one next to the other.
The first would be a ListView and the two others being Grids.
Since the components will overflow on the right, I want to put them in a ScrollViewer.
I did not succeed. I tried to do a really simple example to try, but even the example fails.
<ScrollViewer Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="600" Height="400">
<StackPanel Width="1200" Height="400" Orientation="Horizontal">
<Border Background="AntiqueWhite" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Border Background="Blue" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Border Background="LimeGreen" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
As you can see, the ScrollViewer is Inside a Grid.
What did I miss?

Try settings these properties on the scroll viewer:-
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" ZoomMode="Disabled" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="600" Height="400">
<StackPanel Width="1200" Height="400" Orientation="Horizontal">
<Border Background="AntiqueWhite" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Border Background="Blue" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Border Background="LimeGreen" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
That works for me normally!