如何改变外部矩形的不透明度？

Question

在我的例子中，我想使用矩形更改视频画笔的不透明度。矩形区域应该是透明的，外面的矩形应该是半透明的。我不知道该怎么做。我需要一些样品。

提前致谢

编辑：

我试过网格行和列定义。像这样

<Grid Background="Transparent" Name="OuterGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="211*"/>
        <RowDefinition Height="308"/>
        <RowDefinition Height="249*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Rectangle 
        Stroke="Red" 
        StrokeThickness="4"
        Fill="LightGray"
        Grid.Row="1" 
        Grid.Column="1" />

    <Rectangle
        MouseMove="Rectangle_MouseMove_TopLeft" 
        MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
        MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
        Stroke="Yellow" 
        Canvas.ZIndex="1"
        HorizontalAlignment="Left" 
        VerticalAlignment="Top"
        Height="30" 
        Width="30"
        StrokeThickness="4" Grid.Row="1"
        Fill="Red" 
        Grid.Column="1"  />
    <Rectangle 
        MouseMove="Rectangle_MouseMove_TopRight"
        Stroke="Yellow" 
        MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
        MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
        Canvas.ZIndex="1"
        HorizontalAlignment="Right" 
        VerticalAlignment="Top"
        Height="30" 
        Width="30"
        StrokeThickness="4" Grid.Row="1"
        Fill="Red" 
        Grid.Column="1"  />
    <Rectangle 
        MouseMove="Rectangle_MouseMove_BottomLeft"
        Stroke="Yellow"
        MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" 
        MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
        Canvas.ZIndex="1"
        HorizontalAlignment="Left" 
        VerticalAlignment="Bottom"
        Height="30" 
        Width="30"
        StrokeThickness="4" Grid.Row="1"
        Fill="Red" 
        Grid.Column="1"  />
    <Rectangle
        MouseMove="Rectangle_MouseMove_BottomLeft"
        Stroke="Yellow"
        MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" 
        MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
        Canvas.ZIndex="1"
        HorizontalAlignment="Right" 
        Width="30"
        StrokeThickness="4" Grid.Row="1"
        Fill="Red" 
        Grid.Column="1" Margin="0,278,0,0"  />


</Grid>

c#

 private void Rectangle_MouseMove_TopLeft(object sender, MouseEventArgs e)
    {
        if (isMove)
        {
            Point p = e.GetPosition(this.OuterGrid);
            double pX = point.X - p.X;
            double pY = point.Y - p.Y;


            double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth + pX;
            double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight + pY;
            //if (pX < w)
            //{
            //    OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w + (w - pX), GridUnitType.Pixel);
            //}
            //else
            //{
            //    OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w - (w - pX), GridUnitType.Pixel);
            //}

            //if (pY < h)
            //{
            //    OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h + (h - pY), GridUnitType.Pixel);
            //}
            //else
            //{
            //    OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h - (h - pY), GridUnitType.Pixel);
            //}



            OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h, GridUnitType.Pixel);
            OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w, GridUnitType.Pixel);

        }

    }

    private void Rectangle_MouseMove_TopRight(object sender, MouseEventArgs e)
    {
        if (isMove)
        {
            Point p = e.GetPosition(this.OuterGrid);
            double pX = p.X;
            double pY = p.Y;
            double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth;
            double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight;


            OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(p.Y, GridUnitType.Pixel);
            OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(pX, GridUnitType.Pixel);

        }

    }


    private void Rectangle_MouseMove_BottomLeft(object sender, MouseEventArgs e)
    {
        if (isMove)
        {
            Point p = e.GetPosition(this.OuterGrid);
            double pX = p.X - point.X;
            double pY = p.Y -point.Y;


            double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth + pX;
            double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight + pY;




            OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h, GridUnitType.Pixel);
            OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w, GridUnitType.Pixel);

        }

    }

    private void Rectangle_MouseMove_BottomRight(object sender, MouseEventArgs e)
    {
        if (isMove)
        {
            Point p = e.GetPosition(this.OuterGrid);
            double pX = p.X;
            double pY = p.Y;
            double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth;
            double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight;


            OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(p.Y, GridUnitType.Pixel);
            OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(pX, GridUnitType.Pixel);

        }

    }
    private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        isMove = true;
        point = e.GetPosition(this.OuterGrid);
    }

    private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        isMove = false;
    }

我需要对此进行平滑处理。请微调此代码

Answer 1

我不是 100% 确定你想要实现什么（例如，你指的是什么视频画笔？），但我还是尝试了。

我猜测您想要 WP 8 而不是 WP 8.1（基于您的原始代码）。
外部区域变暗，而矩形内部区域保持不变。我不是 100% 确定是否可以反转元素的 Clip 或 OpacityMask，所以我实现它的方式有点老套。
你的原始代码有很多错误，不是 DRY，而且手柄没有正确调整大小所以我修复了。

最终结果

XAML

<Grid x:Name="LayoutRoot">
    <Grid.Background>
        <ImageBrush ImageSource="/Assets/Image.jpg" Stretch="None" />
    </Grid.Background>

    <Grid x:Name="OuterRect">
        <Grid.Resources>
            <Style x:Key="HandleStyle" TargetType="Rectangle">
                <Setter Property="Width" Value="30" />
                <Setter Property="Height" Value="30" />
                <Setter Property="StrokeThickness" Value="4" />
                <Setter Property="Stroke" Value="Red" />
                <Setter Property="Fill" Value="Yellow" />
            </Style>
        </Grid.Resources>

        <Rectangle Fill="Black" Opacity="0.6" />

        <Grid x:Name="Rect" Width="300" Height="400">
            <Rectangle Stroke="Red" StrokeThickness="4">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="/Assets/Image.jpg" Stretch="None" />
                </Rectangle.Fill>
            </Rectangle>

            <Rectangle
                x:Name="HandleTopLeft"
                Style="{StaticResource HandleStyle}"
                MouseMove="Handle_MouseMove"
                MouseLeftButtonDown="Handle_MouseLeftButtonDown"
                MouseLeftButtonUp="Handle_MouseLeftButtonUp"
                HorizontalAlignment="Left" 
                VerticalAlignment="Top" />
            <Rectangle
                x:Name="HandleTopRight"
                Style="{StaticResource HandleStyle}"
                MouseMove="Handle_MouseMove"
                MouseLeftButtonDown="Handle_MouseLeftButtonDown"
                MouseLeftButtonUp="Handle_MouseLeftButtonUp"
                HorizontalAlignment="Right" 
                VerticalAlignment="Top" />
            <Rectangle
                x:Name="HandleBottomLeft"
                Style="{StaticResource HandleStyle}"
                MouseMove="Handle_MouseMove"
                MouseLeftButtonDown="Handle_MouseLeftButtonDown"
                MouseLeftButtonUp="Handle_MouseLeftButtonUp"
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" />
            <Rectangle
                x:Name="HandleBottomRight"
                Style="{StaticResource HandleStyle}"
                MouseMove="Handle_MouseMove"
                MouseLeftButtonDown="Handle_MouseLeftButtonDown"
                MouseLeftButtonUp="Handle_MouseLeftButtonUp"
                HorizontalAlignment="Right" 
                VerticalAlignment="Bottom" />
        </Grid>
    </Grid>
</Grid>

C#code-behind

const double MIN_RECT_WIDTH = 80;
const double MIN_RECT_HEIGHT = 80;

bool isDragging;
Point startPoint;
Size startSize;

private void Handle_MouseMove(object sender, MouseEventArgs e)
{
    if (!isDragging)
        return;

    var handle = (Rectangle)sender;

    var p = e.GetPosition(null);
    var deltaX = p.X - startPoint.X;
    var deltaY = p.Y - startPoint.Y;

    if (handle == HandleTopLeft || handle == HandleBottomLeft) deltaX = -deltaX;
    if (handle == HandleTopLeft || handle == HandleTopRight) deltaY = -deltaY;
    Rect.Width = Math.Min(OuterRect.ActualWidth, Math.Max(MIN_RECT_WIDTH, startSize.Width + deltaX * 2));
    Rect.Height = Math.Min(OuterRect.ActualHeight, Math.Max(MIN_RECT_HEIGHT, startSize.Height + deltaY * 2));
}

private void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var handle = (Rectangle)sender;
    handle.CaptureMouse();
    isDragging = true;
    startPoint = e.GetPosition(null);
    startSize = Rect.RenderSize;
}

private void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    var handle = (Rectangle)sender;
    handle.ReleaseMouseCapture();
    isDragging = false;
}

如何改变外部矩形的不透明度？

How to Change Opacity of outside Rectangle?

windows-phone-8

windows-phone-8.1