0

Estoy empezando con el mundo WPF y quiero crear un Control de Usuario XAML, el problema es que quiero que el control del usuario no sea una caja rectangular en cuyo interior hay elementos, etc; sino que quiero que sea una forma, en realidad un poligono.

Ahora mismo estoy probando con un poligono cualquiera:

<UserControl x:Class="WpfControlLibrary1.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:WpfControlLibrary1"
         mc:Ignorable="d" Height="224" Width="435" Opacity="10">
<Path Data="M-70.616296,46.859802 L7.3270039,-1.2587545 174.31959,52.958763 168.71134,98.185567 z" Fill="#FF2121D6" HorizontalAlignment="Left" Height="100" Margin="138,114,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="246"/>

Y estoy jugando con la propiedad Opacity, para intentar hacer que sea transparente todo lo que rodea al poligono, pero no encuentro la manera de hacerlo, ya que lo que hace es hacer transparente todo el control cuando lo que quiero es que lo que esta dentro de Path Data se visualize.

Si alguien sabe como conseguir esto estaria muy agradecido de que me ayudase. Un saludo.

1 respuesta 1

1

A ver, puedes lograr eso que quieres de varias formas, acá te dejo una bien simple.

La plantilla para un UserControl sería así:

<UserControl x:Class="MyProject.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Style>
        <Style TargetType="{x:Type UserControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type UserControl}">
                        <Grid>
                            <Path x:Name="_path" Data="M-70.616296,46.859802 L7.3270039,-1.2587545 174.31959,52.958763 168.71134,98.185567 z" Stroke="{TemplateBinding BorderBrush}" Stretch="Uniform" Fill="{TemplateBinding Background}"/>
                            <Path x:Name="_mask" Data="M-70.616296,46.859802 L7.3270039,-1.2587545 174.31959,52.958763 168.71134,98.185567 z" Stroke="{TemplateBinding BorderBrush}" Stretch="Uniform" Fill="#7FE1E1E1" Visibility="Collapsed"/>
                            <Viewbox>
                                <!-- CONTENIDO -->
                            </Viewbox>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" Value="0.8"/>
                                <Setter Property="Stroke" TargetName="_path" Value="OrangeRed"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Stroke" TargetName="_mask" Value="#FFDEDEDE"/>
                                <Setter Property="Visibility" TargetName="_mask" Value="Visible"/>
                                <Setter Property="Foreground" Value="#FFA5A5A5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Style>
</UserControl>

Y para aplicarlo así, ojo que tienes que darle un Background para notar su forma:

<Window x:Class="MyProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:root="clr-namespace:MyProject"
Title="MainWindow" Height="350" Width="525">
    <Grid>
        <root:UserControl1 Background="Red" Width="100" Height="100">
            
        </root:UserControl1>
    </Grid>
</Window>

Ahora bien, puedes lograr cosas mejores con más tiempo pero creo que esto responde tu pregunta, le puse unos Triggers para que sepan como integrarlos.

Un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.