WPF: Как изменить размер баров с помощью мыши или касания

Question

У меня есть сетка / холст, на котором есть несколько баров, которые выглядят как обычная гистограмма.Мне бы хотелось, чтобы пользователь мог (используя касание и мышь) изменять размеры этих полос, перетаскивая их в выбранные точки - см. Изображение ниже:

Так что5 точек, нарисованных здесь, будут где пользователь может изменить размер.Новичок в WPF, я не уверен, как подойти к этому или даже искать правильные решения.Кто-нибудь может указать мне правильное направление?

Answer 1

Когда вы выполняете наведение мыши, оно изменяет размер вашего элемента управления сеткой, см. Код ниже

 <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="barresize.MainWindow"
        x:Name="Window"
        Title="MainWindow"
        Width="640" Height="480">
        <Window.Resources>
            <Storyboard x:Key="OnMouseEnter1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="tbTB">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="2">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <BackEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="tbTB">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="2">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <BackEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Window.Resources>
        <Window.Triggers>
            <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="tbTB">
                <BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="tbTB">
                <StopStoryboard BeginStoryboardName="OnMouseEnter1_BeginStoryboard"/>
            </EventTrigger>
        </Window.Triggers>

        <Grid >

            <Grid x:Name="grid1" Background="#00000000">

                <Grid Name="tbTB" VerticalAlignment="Center" HorizontalAlignment="Center" Height="100" Width="30" Background="Blue">

                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Grid.RenderTransform>

                </Grid>

            </Grid>
        </Grid>

    </Window>