Diseño ventana WPF (.NET Framework) parte_ 2

Nombre del proyecto: VENTANA

xaml:

<Window x:Class="VENTANA.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Modern WPF Window"

        Height="650" Width="1200"

        WindowStyle="None" AllowsTransparency="True" Background="Transparent">

    <!-- Contenedor externo con bordes redondeados -->

    <Border CornerRadius="10" BorderThickness="2" Background="#1E1E2E" BorderBrush="#6C63FF">

        <!-- Contenedor interno con fondo y bordes -->

        <Border CornerRadius="1" BorderThickness="0" Margin="5" Background="#1E1E2E">

            <!-- Contenido de la ventana -->

            <Grid Background="#1E1E2E" ClipToBounds="True">

                <!-- Barra superior personalizada -->

                <DockPanel Background="#23233F" Height="40" VerticalAlignment="Top" MouseLeftButtonDown="OnDragWindow">

                    <!-- Título alineado al centro -->

                    <StackPanel Orientation="Horizontal" DockPanel.Dock="Right" Width="100">

                        <!-- Botón minimizar -->

                        <Button Content="-" Width="30" Height="30" Margin="0,0,5,0" ToolTip="Minimizar" Click="MinimizeWindow_Click">

                            <Button.Style>

                                <Style TargetType="Button">

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Foreground" Value="White"/>

                                    <Setter Property="BorderBrush" Value="Transparent"/>

                                    <Setter Property="BorderThickness" Value="0"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="Button">

                                                <Border Background="{TemplateBinding Background}" CornerRadius="5">

                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                                                </Border>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                    <Style.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">

                                            <Setter Property="Background" Value="#55FFFFFF"/>

                                            <Setter Property="Foreground" Value="Black"/>

                                        </Trigger>

                                    </Style.Triggers>

                                </Style>

                            </Button.Style>

                        </Button>

                        <!-- Botón maximizar/restaurar -->

                        <Button Content="☐" Width="30" Height="30" Margin="0,0,5,0" ToolTip="Maximizar/Restaurar" Click="MaximizeWindow_Click">

                            <Button.Style>

                                <Style TargetType="Button">

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Foreground" Value="White"/>

                                    <Setter Property="BorderBrush" Value="Transparent"/>

                                    <Setter Property="BorderThickness" Value="0"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="Button">

                                                <Border Background="{TemplateBinding Background}" CornerRadius="5">

                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                                                </Border>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                    <Style.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">

                                            <Setter Property="Background" Value="#55FFFFFF"/>

                                            <Setter Property="Foreground" Value="Black"/>

                                        </Trigger>

                                    </Style.Triggers>

                                </Style>

                            </Button.Style>

                        </Button>

                        <!-- Botón cerrar -->

                        <Button Content="X" Width="30" Height="30" Margin="0" ToolTip="Cerrar" Click="CloseWindow_Click">

                            <Button.Style>

                                <Style TargetType="Button">

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Foreground" Value="White"/>

                                    <Setter Property="BorderBrush" Value="Transparent"/>

                                    <Setter Property="BorderThickness" Value="0"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="Button">

                                                <Border Background="{TemplateBinding Background}" CornerRadius="5">

                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                                                </Border>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                    <Style.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">

                                            <Setter Property="Background" Value="#FF4040"/>

                                            <Setter Property="Foreground" Value="White"/>

                                        </Trigger>

                                    </Style.Triggers>

                                </Style>

                            </Button.Style>

                        </Button>

                    </StackPanel>

                    <TextBlock Text="Modern WPF Window" Foreground="White" DockPanel.Dock="Right" Width="130" Height="21"/>

                </DockPanel>

                <!-- Contenedor dividido en dos partes: izquierda (menú vertical) y derecha (contenido principal) -->

                <Grid Grid.Row="1" Grid.Column="0" Margin="10,10,10,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                    <!-- Barra lateral izquierda para el menú vertical -->

                    <Border Background="#23233F" CornerRadius="10" Width="60" HorizontalAlignment="Left" Margin="-10,36,0,-8">

                        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" Margin="10">

                            <!-- Íconos del menú vertical -->

                            <Button Height="40" Width="40" Background="Transparent" BorderBrush="Transparent" Margin="5">

                                <Image Source="Icons/info.png" Stretch="Uniform"/>

                            </Button>

                            <Button Height="40" Width="40" Background="Transparent" BorderBrush="Transparent" Margin="5">

                                <Image Source="Icons/settings.png" Stretch="Uniform"/>

                            </Button>

                            <Button Height="40" Width="40" Background="Transparent" BorderBrush="Transparent" Margin="5">

                                <Image Source="Icons/documents.png" Stretch="Uniform"/>

                            </Button>

                            <Button Height="40" Width="40" Background="Transparent" BorderBrush="Transparent" Margin="5">

                                <Image Source="Icons/notes.png" Stretch="Uniform"/>

                            </Button>

                            <Button Height="40" Width="40" Background="Transparent" BorderBrush="Transparent" Margin="5">

                                <Image Source="Icons/gear.png" Stretch="Uniform"/>

                            </Button>

                            <Button Height="40" Width="40" Background="Transparent" BorderBrush="Transparent" Margin="5">

                                <Image Source="Icons/edit.png" Stretch="Uniform"/>

                            </Button>

                            <Button Height="40" Width="40" Background="Transparent" BorderBrush="Transparent" Margin="5">

                                <Image Source="Icons/search.png" Stretch="Uniform"/>

                            </Button>

                        </StackPanel>

                    </Border>

                    <!-- Contenido principal alineado a la derecha -->

                    <Border Background="#23233F" CornerRadius="10" Margin="58,36,0,-8">

                        <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

                            <TextBlock Text="Bienvenido a tu ventana moderna" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Foreground="White"/>

                        </Grid>

                    </Border>

                </Grid>

            </Grid>

        </Border>

    </Border>

</Window>

xaml.cs:

using System.Windows;

using System.Windows.Input;

namespace VENTANA

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        private void MinimizeWindow_Click(object sender, RoutedEventArgs e)

        {

            WindowState = WindowState.Minimized;

        }

        private void MaximizeWindow_Click(object sender, RoutedEventArgs e)

        {

            if (WindowState == WindowState.Normal)

                WindowState = WindowState.Maximized;

            else

                WindowState = WindowState.Normal;

        }

        private void CloseWindow_Click(object sender, RoutedEventArgs e)

        {

            Close();

        }

        private void OnDragWindow(object sender, MouseButtonEventArgs e)

        {

            if (e.ChangedButton == MouseButton.Left)

            {

                DragMove();

            }

        }

    }

}

Diseño ventana WPF (.NET Framework) parte_ 1

Nombre del proyecto :VENTANA

codigo xaml:

<Window x:Class="VENTANA.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Modern WPF Window"

        Height="650" Width="1200"

        WindowStyle="None" AllowsTransparency="True" Background="Transparent">

    <!-- Contenedor externo que envuelve toda la ventana -->

    <Border CornerRadius="10" BorderThickness="2" Background="#1E1E2E" BorderBrush="#6C63FF">

        <!-- Contenedor interno para el contenido -->

        <Border CornerRadius="1" BorderThickness="0" Margin="5" Background="#1E1E2E">

            <!-- Contenido de la ventana -->

            <Grid Background="#1E1E2E" ClipToBounds="True">

                <!-- Barra superior personalizada -->

                <DockPanel Background="#23233F" Height="40" VerticalAlignment="Top" MouseLeftButtonDown="OnDragWindow">

                    <!-- Título alineado a la izquierda -->

                    <!-- Botones completamente alineados a la derecha -->

                    <StackPanel Orientation="Horizontal" DockPanel.Dock="Right" Width="101">

                        <!-- Botón minimizar -->

                        <Button Content="-" Width="30" Height="30" Margin="0,0,5,0"

                                ToolTip="Minimizar" Click="MinimizeWindow_Click">

                            <Button.Style>

                                <Style TargetType="Button">

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Foreground" Value="White"/>

                                    <Setter Property="BorderBrush" Value="Transparent"/>

                                    <Setter Property="BorderThickness" Value="0"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="Button">

                                                <Border Background="{TemplateBinding Background}"

                                                        CornerRadius="5">

                                                    <ContentPresenter HorizontalAlignment="Center"

                                                                      VerticalAlignment="Center"/>

                                                </Border>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                    <!-- Efecto translúcido cuando el cursor está sobre el botón -->

                                    <Style.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">

                                            <Setter Property="Background" Value="#55FFFFFF"/>

                                            <!-- Fondo translúcido -->

                                            <Setter Property="Foreground" Value="Black"/>

                                        </Trigger>

                                    </Style.Triggers>

                                </Style>

                            </Button.Style>

                        </Button>

                        <!-- Botón maximizar/restaurar -->

                        <Button Content="☐" Width="30" Height="30" Margin="0,0,5,0"

                                ToolTip="Maximizar/Restaurar" Click="MaximizeWindow_Click">

                            <Button.Style>

                                <Style TargetType="Button">

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Foreground" Value="White"/>

                                    <Setter Property="BorderBrush" Value="Transparent"/>

                                    <Setter Property="BorderThickness" Value="0"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="Button">

                                                <Border Background="{TemplateBinding Background}"

                                                        CornerRadius="5">

                                                    <ContentPresenter HorizontalAlignment="Center"

                                                                      VerticalAlignment="Center"/>

                                                </Border>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                    <!-- Efecto translúcido cuando el cursor está sobre el botón -->

                                    <Style.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">

                                            <Setter Property="Background" Value="#55FFFFFF"/>

                                            <!-- Fondo translúcido -->

                                            <Setter Property="Foreground" Value="Black"/>

                                        </Trigger>

                                    </Style.Triggers>

                                </Style>

                            </Button.Style>

                        </Button>

                        <!-- Botón cerrar -->

                        <Button Content="X" Width="30" Height="30" Margin="0"

                                ToolTip="Cerrar" Click="CloseWindow_Click">

                            <Button.Style>

                                <Style TargetType="Button">

                                    <!-- Sin fondo al inicio -->

                                    <Setter Property="Background" Value="Transparent"/>

                                    <Setter Property="Foreground" Value="White"/>

                                    <Setter Property="BorderBrush" Value="Transparent"/>

                                    <Setter Property="BorderThickness" Value="0"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="Button">

                                                <Border Background="{TemplateBinding Background}"

                                                        CornerRadius="5">

                                                    <ContentPresenter HorizontalAlignment="Center"

                                                                      VerticalAlignment="Center"/>

                                                </Border>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                    <!-- Fondo rojo sólido al pasar el cursor -->

                                    <Style.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">

                                            <Setter Property="Background" Value="#FF4040"/>

                                            <!-- Rojo sólido -->

                                            <Setter Property="Foreground" Value="White"/>

                                        </Trigger>

                                    </Style.Triggers>

                                </Style>

                            </Button.Style>

                        </Button>

                    </StackPanel>

                    <TextBlock Text="Modern WPF Window"

                               Foreground="White"

                               DockPanel.Dock="Right" Width="118" Height="16"/>

                </DockPanel>

                <!-- Contenido principal -->

                <TextBlock Text="Bienvenido a tu ventana moderna"

                           HorizontalAlignment="Center"

                           VerticalAlignment="Center"

                           FontSize="24"

                           Foreground="White"/>

            </Grid>

        </Border>

    </Border>

</Window>











Codigo xaml.cs:

using System.Windows;

using System.Windows.Input;

namespace VENTANA

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        private void MinimizeWindow_Click(object sender, RoutedEventArgs e)

        {

            WindowState = WindowState.Minimized;

        }

        private void MaximizeWindow_Click(object sender, RoutedEventArgs e)

        {

            if (WindowState == WindowState.Normal)

                WindowState = WindowState.Maximized;

            else

                WindowState = WindowState.Normal;

        }

        private void CloseWindow_Click(object sender, RoutedEventArgs e)

        {

            Close();

        }

        private void OnDragWindow(object sender, MouseButtonEventArgs e)

        {

            if (e.ChangedButton == MouseButton.Left)

            {

                DragMove();

            }

        }

    }

}