Clever Geek Handbook

How to copy an image in xaml and limit the width of the image? (WinRT)

I have an image that can be set via the api, I want the image to be cropped when it is over 250px. And it works. However, the image is in the stack pane along with some text blocks. Although the image we see is cropped, the actual image width remains over 250 pixels.

Here is the xaml

<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <Button Foreground="Black" Content="Button" x:Name="BackButton" Style="{StaticResource BackButtonStyle}" Visibility="Collapsed" VerticalAlignment="Center" Margin="25,0,0,0"  Click="BackButtonClick" />
                        <Border>
                            <Image x:Name="LogoImage" Source="Images/Logo.png" Height="50"  Margin="15 0 0 0" Stretch="Uniform" VerticalAlignment="Center">
                                <Image.Clip>
                                    <RectangleGeometry Rect="0 0 50 250"></RectangleGeometry>
                                </Image.Clip>
                            </Image>

                        </Border>
                        <TextBlock Foreground="Black" x:Name="NameTextbox" Margin="15, 0, 0, 0" VerticalAlignment="Center" FontSize="26"></TextBlock>

                        <TextBlock VerticalAlignment="Bottom" x:Name="ErrorMessage" Text="Unable to reach server" Foreground="Red" Margin="15 0 0 0"  FontSize="26" FontWeight="Bold" Visibility="Collapsed"></TextBlock>
                    </StackPanel>

So let's say the image width is 2000 px. Then the text box after the image will be pushed away from the screen, but only 250 pixels of the image will be visible.

Any advice?

+3


source to share


3 answers


It looks like I was taking the wrong approach. I was able to achieve what I wanted using a scrollviewer with scroll disabled.



<ScrollViewer MaxWidth="350" HorizontalScrollBarVisibility="Hidden" HorizontalScrollMode="Disabled">
     <Image x:Name="LogoImage" HorizontalAlignment="Left" Source="Images/Logo.png" Height="50" Margin="15 0 0 0" Stretch="Uniform" VerticalAlignment="Center">
     </Image>
</ScrollViewer>
+1


source


You can just set the border width and height and set Stretch Image to None and not use the heavy ScrollViewer.



+1


source


I tried @FilipSkakun's answer and it worked pretty well, with one setting: I put Image.Stretch

in UniformToFill

.

I am posting my code here as it might help someone:

<Border Width="30" Height="30">
    <Border.Clip>
        <EllipseGeometry RadiusX="15" RadiusY="15" Center="15,15" />
    </Border.Clip>
    <Image Source="..." VerticalAlignment="Center" MaxWidth="30" Stretch="UniformToFill" />
</Border>

Also, I can control the positioning of the image using the property VerticalAlignment

.

0


source






More articles:


All Articles