0

I have 2 imagebrushes inside the border, one of them does not zoom, but I want the zoomed image to be displayed around the mouse when I move the mouse over it. as follow image:

enter image description here

I want the zoomed photo to change by changing the mouse position on the main photo

Here is my code :

WPF XAML


<Border Style="{StaticResource Border_Box}" Margin="10" Grid.Column="2"   x:Name="uImageZoom_Border">
    <Border.Effect>
        <DropShadowEffect BlurRadius="10" Direction="10" Opacity="0.25" RenderingBias="Quality" ShadowDepth="0"/>
    </Border.Effect>
    <Border CornerRadius="16" Margin="10" x:Name="uBottleZoom_Image" Grid.Row="1" >
        <Border.Effect>
            <DropShadowEffect BlurRadius="10" Direction="10" Opacity="0.25" RenderingBias="Quality" ShadowDepth="0"/>
        </Border.Effect>
        <Border.Background>
            <ImageBrush x:Name="uImageControlZoom_Brush"   Stretch="UniformToFill" ImageSource="/Views/ImageView/LUCID_TRI071S-M_221100697__20240304180535053_image0.jpg" />
        </Border.Background>
    </Border>
</Border>


<Border Style="{StaticResource Border_Box}" Margin="10" Grid.Column="3" Grid.RowSpan="2"  x:Name="uImage_Border">
    <Border.Effect>
        <DropShadowEffect BlurRadius="10" Direction="10" Opacity="0.25" RenderingBias="Quality" ShadowDepth="0"/>
    </Border.Effect>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="13*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" Orientation="Vertical" Margin="10">
            <Label  Content="Image" FontWeight="DemiBold" FontSize="16" HorizontalContentAlignment="Left"/>
            <Separator Style="{StaticResource MaterialDesignDarkSeparator}"/>
        </StackPanel>

        <Border CornerRadius="16" Margin="10" x:Name="uBottle_Image" Grid.Row="1" >
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" Direction="10" Opacity="0.25" RenderingBias="Quality" ShadowDepth="0"/>
            </Border.Effect>
            <Border.Background>
                <ImageBrush x:Name="uImageControl_Brush"   Stretch="Uniform" ImageSource="/Views/ImageView/LUCID_TRI071S-M_221100697__20240304180535053_image0.jpg" />
            </Border.Background>
        </Border>

        <StackPanel Grid.Row="2" Margin="10" Orientation="Horizontal" HorizontalAlignment="Center">

            ... Buttons ...

        </StackPanel>
    </Grid>

</Border>

There is no need for the zoomed panel to be as shown below, and it is not a problem if it is with another control

Any idea how to implemet it? Thank for help.

Improve this question
3
  • You need a MouseMouse event handler, and a ScrollViewer control; which allows for scrolling, zooming and setting the size of the view port (over an image). The "focus" of the view port is the mouse position. Commented Sep 11, 2024 at 20:07
  • Thanks , Can you write a sample code for me? Commented Sep 14, 2024 at 4:47
  • The risk-reward (down votes) is too high. Write "something" and I'll help as much as I can. Commented Sep 14, 2024 at 4:52
Related questions
460
Storing WPF Image Resources
1
"No installed components were detected" error on toggling AppBarButton visibility with Visual States
371
Setting WPF image source in code
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.