0

Me encuentro trabajando con WPF, Visual Studio 2015 en el cual deseo colocar botones uno al lado de otro así como esta imagen.

Botones

Solo he podido conseguir esto.

Botones WPF

Este es el código XAML que estoy ocupando, lo que hice fue poner un Grid con dos columnas y una fila en la cual en la primera pongo Seleccione el Menú, y en el otro lado los botones.

<Grid>
    <StackPanel Orientation="Vertical">

        <StackPanel>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Text="Seleccione el Menu" FontWeight="Bold" FontSize="13" Margin="20" Grid.Column="0" Grid.Row="0"/>
                <Button Width="60" Height="20" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="0" Content="Nuevo"/>
                <Button Width="60" Height="20" Grid.Column="1" Grid.Row="0" Content="Guardar" HorizontalAlignment="Center" Margin="-50,0,0,0"/>
                <Button Width="60" Height="20" Grid.Column="1" Grid.Row="0" Content="Eliminar" Margin="-195,0,0,0" HorizontalAlignment="Right"/>
            </Grid>
        </StackPanel>

        <View:MyTabControl x:Name="currentTabControl" Margin="5"/>

    </StackPanel>

</Grid>

¿Cómo puedo hacer para que se vea como los botones de la primera imagen?

Ya logré poner las imágenes y el texto en el botón, pero el texto no logro ponerlo debajo de la imagen, ocupo el siguiente código.

<Grid>
    <StackPanel Orientation="Vertical">
        <StackPanel>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Text="Seleccione el Menu" FontWeight="Bold" FontSize="13" Margin="20" Grid.Column="0" Grid.Row="0"/>
                <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0">
                    <Button x:Name="btnMNuevo" Width="60" Height="40"  Grid.Column="1" Grid.Row="0">
                        <DockPanel>
                            <Image Source="/Imagenes/New.png"/>
                            <TextBlock Text="Nuevo" TextAlignment="Left"/>
                        </DockPanel>
                    </Button>
                    <Button x:Name="btnMGuardar" Width="60" Height="40" Grid.Column="1" Grid.Row="0">
                        <DockPanel>
                            <Image Source="/Imagenes/save.png"/>
                            <TextBlock Text="Guardar" Margin="0"/>
                        </DockPanel>
                    </Button>
                    <Button x:Name="btnMEliminar" Width="60" Height="40" Grid.Column="1" Grid.Row="0">
                        <DockPanel>
                            <Image Source="/Imagenes/delete.png"/>
                            <TextBlock Text="Eliminar"/>
                        </DockPanel>
                    </Button>
                </StackPanel>
            </Grid>
        </StackPanel>

        <View:MyTabControl x:Name="currentTabControl" Margin="5"/>

    </StackPanel>

</Grid>

boton

7
  • uh.. tienes muchas formas de hacer esto.. piensa que es html.. olvidate de que estas adentro de un control.. se puede hacer con un stack panel, con una grilla, achicando el espacio del boton y agrandando el de la imagen...
    – gbianchi
    el 8 oct. 2017 a las 18:01
  • 1
    Muy fácil: Crea un Grid con 2 Rows, en el superior el icono, abajo el texto, y eso lo agregas en el StackPanel directamente, el StackPanel debe tener Orientation="Horizontal" y eso es todo, te quedará todo alineado y bonito.
    – Leodev
    el 8 oct. 2017 a las 18:44
  • @Leodev ¿entonces mi botón que haría click sería el primer row?, ese row haría la ves de un botón? el 9 oct. 2017 a las 21:53
  • @Leodev Acabo de hacer lo que me dijiste y quedo como lo predijiste, gracias por tu apoyo y si gbianchi grid y mas grid. el 9 oct. 2017 a las 22:23
  • 1
    Si pones un boton arriba claro, ahí dejas el Click, o puedes poner una imagen nada más, la imagen (Rectangle) no tiene Click pero puede usar su evento MouseLeftButtonDown que hace lo mismo (el texto o label por si solo igual lo tiene en todo caso)
    – Leodev
    el 10 oct. 2017 a las 2:25

1 respuesta 1

1

como tema general no esta bien repetir código así como utilizar controles dentro de controles redundantes.

Para evitar lo que tienes hecho trata siempre de crear un control personalizado heredando del que quieres modificar, en este caso de un Button, con esto podrás heredar todas sus funcionalidades.

Espero que esto te pueda ayudar.

Control:

Este es un CustomControl el cual puedes modificar, agregar funcionalidades en este caso una imagen.

public class ImageButton : Button
{
    public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register(
        "ImageSource", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(default(ImageSource)));

    public ImageSource ImageSource
    {
        get { return (ImageSource) GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }
}

El siguiente caso es crear el style para el control creado "ImageButton", con esto puedes cambiar su apariencia; Este código lo puedes poner dentro de un Diccionario de recursos, para que pueda ser utilizado por toda tu aplicación y no repetir el Style en cada ventana

<Window.Resources>
    <Style x:Key="WrappingStyle" TargetType="{x:Type TextBlock}" >
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextAlignment" Value="Center"/>
        </Style>

    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="ButtonStyle" TargetType="{x:Type controls:ImageButton}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Margin" Value="2,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:ImageButton}">
                    <Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Image x:Name="imageBtn" Source="{TemplateBinding ImageSource}" Margin="2" VerticalAlignment="Stretch"/>
                            <ContentPresenter Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FlowDirection="LeftToRight">
                                <ContentPresenter.Resources>
                                    <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                        </Grid>
                    </Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <controls:ImageButton Style="{StaticResource ButtonStyle}" Width="45" Height="60" Content="Buscar F7" 
        ImageSource="Resources/search.png"/>
    <controls:ImageButton Grid.Column="1" Style="{StaticResource ButtonStyle}" Width="45" Height="60" Content="Buscar F7" 
        ImageSource="Resources/search.png"/>
    <controls:ImageButton Grid.Column="2" Style="{StaticResource ButtonStyle}" Width="45" Height="60" Content="Buscar F7" 
        ImageSource="Resources/search.png"/>
    <controls:ImageButton Grid.Column="3" Style="{StaticResource ButtonStyle}" Width="45" Height="60" Content="Buscar F7" 
        ImageSource="Resources/search.png"/>
</Grid>
  • Para utilizar el control solo tienes que llamar al control desde la vista donde lo quieres utilizar,asignando en casd ImageSource, la imagen la cual quieras utilizar, recuerda que al heredar de un button tienen todas sus funcionalidades.

Un saludo.

0

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.