Search code examples
c#wpfeffectaero-glassmediacenter

how create a rectangle glass like windows media center xaml

I want to create a rectangle glass and a menu exact like that is in windows media center enter image description here

i want do it with xaml not blend... please help i want create a menu like this for my app.

want do this too enter image description here

Solution

  • This is not exactly like the examples but I think it is a acceptable start:

        <Grid x:Name="LayoutRoot">
    <Grid.Background>
        <RadialGradientBrush RadiusY="0.573" RadiusX="0.667" GradientOrigin="1.01,1.035">
            <GradientStop Color="#FF06183C" Offset="0.81"/>
            <GradientStop Color="#FF0D60A3"/>
        </RadialGradientBrush>
    </Grid.Background>

    <Grid Width="640" Height="480">
        <Border BorderThickness="2" CornerRadius="3" Height="40" Width="400" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA4B3C5" Offset="0"/>
                    <GradientStop Color="#FFA4B3C5" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border BorderThickness="1" BorderBrush="Black" CornerRadius="0" >
                <Border.Background>
                    <RadialGradientBrush GradientOrigin="0.225,-0.616" RadiusY="0.863" RadiusX="0.757">
                        <GradientStop Color="#EEFFFFFF"/>
                        <GradientStop Color="#00FFFFFF" Offset="0.696"/>
                    </RadialGradientBrush>
                </Border.Background>

                <TextBlock  TextWrapping="Wrap" FontSize="18.667" Foreground="White" Margin="10,4,3,-2"><Run Language="pt-br" Text="Edit Start Menu"/></TextBlock>
            </Border>
        </Border>


        <Border BorderThickness="1" CornerRadius="3" Height="140" VerticalAlignment="Top" Margin="311,30,113,0">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="5" Direction="315"/>
            </Border.Effect>

            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.811,0.2" StartPoint="0.246,1.023">
                    <GradientStop Color="#FF7C9FC8" Offset="0"/>
                    <GradientStop Color="#FF7C9FC8" Offset="1"/>
                    <GradientStop Color="#FF353535" Offset="0.491"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border BorderThickness="0"  CornerRadius="0" Margin="0" >
                <Border.Background>
                    <RadialGradientBrush GradientOrigin="0.191,-0.232" RadiusY="0.353" RadiusX="1.001">
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1" ScaleX="1"/>
                                <SkewTransform AngleY="0" AngleX="0" CenterY="0.5" CenterX="0.5"/>
                                <RotateTransform Angle="-29.285" CenterY="0.5" CenterX="0.5"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                        <GradientStop Color="#B6FFFFFF"/>
                        <GradientStop Color="#0BFFFFFF" Offset="0.578"/>
                    </RadialGradientBrush>
                </Border.Background>

                <TextBlock  TextWrapping="Wrap" FontSize="18" Foreground="White" HorizontalAlignment="Right" Margin="0,0,7,0" Text="recorded TV" UseLayoutRounding="True"></TextBlock>
            </Border>
        </Border>



    </Grid>

</Grid>