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>