用户控件在ViewBox中时更改大小

Question

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>

Answer 1

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>