How to Change Opacity of outside Rectangle? - windows-phone-8

Question

In my case i want to change the opacity of the video brush using Rectangle. Rectangle area should have Transparent and out side rectangle should have semi Transparent. I don't know how to do this. I need some sample for this.
Thanks in advance
Edit:
I have tried Grid row and column definition . like this
<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;
}
I need smooth motion on this.
Pls fine tune this code

Answer 1

I'm not 100% sure of what you want to achieve exactly (e.g. what video brush are you referring to?), but I attempted it anyway.
I'm guessing you want WP 8 not WP 8.1 (based on your original code).
Outside region is darkened while region inside the rectangle remains untouched. I'm not 100% sure if it's possible to invert an element's Clip or OpacityMask, so the way I achieved this is kind of hacky.
Your original code was very buggy, not DRY, and the handles didn't resize properly so I fixed that.
Final result
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;
}