How to make a child element of a Viewbox not scalable

Question

I have a WPF Window with Viewbox. I want one of the child elements of this Viewbox to stay the same size at any screen resolution.

My XAML:

<Viewbox Name="MyMainViewbox" Stretch="Fill">
<Grid Name="MyMainGrid">
    <Image Source="Images/bg.bmp" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill"/>
    <Image Name="Thumb1" Source="Images/t1.png"  MouseUp="Right_Click"  Margin="0, 100, 50, 0" HorizontalAlignment="Right" VerticalAlignment="Stretch" Visibility="Visible"/>
    <Image Name="Thumb2" Source="Images/t2.png" MouseUp="Left_Click"  Margin="50, 100, 0, 0" HorizontalAlignment="Left"  VerticalAlignment="Stretch" Visibility="Visible"/>
    <Image Name="CurThumb" Width="640" Height="480" Stretch="UniformToFill"  Margin="0, 50, 0, 0" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden"/>
 </Grid>
</Viewbox>

The first 2 images inside the Viewbox are predefined and scaled finely at the different screen resolutions. My problem is with the 3rd image that gets its source during the runtime and should be of the same exact size at all resolutions. It will contain photos taken at 4x3 aspect ration, and I want them to stay so.

However at 16x9 screen resolutions they are stretched. I have tried to set a fixed size in XAML - it doesn't work. I have tried to set Stretch to None - doesn't work neither. I have tried to rest the sizes of this Image in the code behind - to no avail.

What else can I do to make this third picture unscalable? It should stay inside the Viewbox for a couple of reasons.

You will only accidentally get a proper aspect ratio as long as the ViewBox sets [Stretch](http://msdn.microsoft.com/en-us/library/system.windows.media.stretch.aspx) to `Fill`. — Clemens, Apr 01 '12 at 13:24
I have set Stretch="None" for this element - it didn't have any effect. — Flot2011, Apr 01 '12 at 13:28
And what are those couple reasons? Why not a Grid with two view boxes and the third row? — paparazzo, Apr 01 '12 at 13:37
I have simplified my real design to make the question clearer. Actually there is much more controls in this Viewbox, and all of them (TextBoxes, Images, Buttons, Video components) I want to scale except this one. And this one is in the center of the screen. — Flot2011, Apr 01 '12 at 13:46

score 3 · Accepted Answer · answered Apr 01 '12 at 13:51

3

Use two overlapping elements.

<Grid>
    <Viewbox>
        <Grid>
            ... scaled images
        </Grid>
    </Viewbox>
    <Grid>
        ... non scaled images
    <Grid>
<Grid>

answered Apr 01 '12 at 13:51

Phil

42,255
9
100
100

How to make a child element of a Viewbox not scalable

1 Answers1