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:

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.