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();

            }

        }

    }

}


0 comments:

Publicar un comentario