WPF Change Grid and Grid Border opacity without affecting children

Question

I have a grid that i want to make opacity 0.5. i also have a border for this grid in order to make it rounded cornered and i want this border to also have opacity 0.5. i want all this without effecting the content of the grid. i succeeded changing the opacity of the Grid without effecting the content:

        <Grid  Grid.Column="0"  Grid.Row="0" Margin="10,15,5,5" >
        <Border BorderThickness="7" CornerRadius="4" >
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Button Grid.Row="1" Grid.Column="0" Width="40" Height="40" Content="Asaf"></Button>

            </Grid>
        </Border>
    </Grid>

in the example above the button has full opacity while the grid is 0.5, but what about the border? How do i make the border have opacity 0.5 without effecting the grid inside it and the grid content (all the border children)?

i tried this, but it doesn't work:

        <Grid  Grid.Column="0"  Grid.Row="0" Margin="10,15,5,5" >
        <Border BorderThickness="7" CornerRadius="4">
            <Border.Background>
                <SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
            </Border.Background>
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Button Grid.Row="1" Grid.Column="0" Width="40" Height="40" Content="Asaf"></Button>

            </Grid>
        </Border>
    </Grid>

Answer 1

Just set the BorderBrush-Property (not the Background-Property) of the Border to:

<Border.BorderBrush>
   <SolidColorBrush Color="#000000" Opacity="0.5"/>
</Border.BorderBrush>

In your example, it would look like this:

<Grid  Grid.Column="0"  Grid.Row="0" Margin="10,15,5,5" >
    <Border BorderThickness="7" CornerRadius="4">
        <Border.BorderBrush>
           <SolidColorBrush Color="#000000" Opacity="0.5"/>
        </Border.BorderBrush>
        <Grid>
            <Grid.Background>
                <SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="1" Grid.Column="0" Width="40" Height="40" Content="Asaf"></Button>

        </Grid>
    </Border>
</Grid>

Answer 2

For those wanting to change the border/opacity of the gridlines within a DataGrid one can simply setup the opaque color in the resources:

 <Window.Resources>
     <SolidColorBrush x:Key="StackOverflowGray" Color="LightGray" Opacity=".3" />
 </Window.Resources>

...

Then the following usages will have a lighter cell border shown in the datagrid:

<DataGrid GridLinesVisibility="All"
          HorizontalGridLinesBrush="{StaticResource StackOverflowGray}"
          VerticalGridLinesBrush="{StaticResource StackOverflowGray}"