6 Replies - 7557 Views - Last Post: 07 August 2013 - 01:33 AM Rate Topic: -----

#1 oyyou  Icon User is offline

  • D.I.C Head

Reputation: 28
  • View blog
  • Posts: 196
  • Joined: 26-April 10

Multiple Buttons in one object (XAML)

Posted 06 August 2013 - 02:55 AM

My object is to create a template of sorts, that contains 4 buttons.
So I'll be able to create many instances of this object and give the 4 buttons and event.
So far I've got this
            <Style x:Key="fourButtons" TargetType="{x:Type Rectangle}">
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="Width" Value="100"/>
                <Setter Property="Height" Value="20"/>
                <Setter Property="Stroke" Value="LightGray"/>
            </Style>


I was hoping to encapsulate the buttons in something like this (I did look for "panel", but couldn't find it).
I'm not sure if I am going around this in the right manor or not.

Any hints?

Is This A Good Question/Topic? 0
  • +

Replies To: Multiple Buttons in one object (XAML)

#2 oyyou  Icon User is offline

  • D.I.C Head

Reputation: 28
  • View blog
  • Posts: 196
  • Joined: 26-April 10

Re: Multiple Buttons in one object (XAML)

Posted 06 August 2013 - 05:40 AM

Just an update, I have a temp solution.

// Resource Dictionary
<Style x:Key="fourStack" TargetType="{x:Type Grid}">
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="Width" Value="100"/>
                <Setter Property="Height" Value="20"/>
            </Style>

            <Style x:Key="smallButton" TargetType="{x:Type Button}">
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="Width" Value="25"/>
                <Setter Property="Height" Value="20"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid x:Name="Chrome" Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Foreground" Value="#0000FF"/>
                                    <Setter Property="Opacity" TargetName="Chrome" Value="0.8"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


        <Border x:Name="Rounded" BorderThickness="0" CornerRadius="50" Background="White" />
        <Grid Style="{DynamicResource fourStack}" Margin="11,80,0,0" >
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Rounded}"/>
            </Grid.OpacityMask>
            <Button Style="{DynamicResource smallButton}" Content="&lt;&lt;" Command="{Binding MinusManySD}"/>
            <Button Style="{DynamicResource smallButton}" Content="&lt;" Margin="25,0,0,0" Command="{Binding MinusOneSD}"/>
            <Button Style="{DynamicResource smallButton}" Content=">" Margin="50,0,0,0" Command="{Binding AddOneSD}"/>
            <Button Style="{DynamicResource smallButton}" Content=">>" Margin="75,0,0,0" Command="{Binding AddManySD}"/>
        </Grid>



I personally think this is a shoddy way of doing it, and there must be a better way.

This post has been edited by oyyou: 06 August 2013 - 05:41 AM

Was This Post Helpful? 0
  • +
  • -

#3 tlhIn`toq  Icon User is offline

  • Xamarin Cert. Dev.
  • member icon

Reputation: 6505
  • View blog
  • Posts: 14,360
  • Joined: 02-June 10

Re: Multiple Buttons in one object (XAML)

Posted 06 August 2013 - 05:48 AM

Quote

My object is to create a template of sorts, that contains 4 buttons.
So I'll be able to create many instances of this object and give the 4 buttons and event.

Sounds like a UserControl to me
Was This Post Helpful? 1
  • +
  • -

#4 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Multiple Buttons in one object (XAML)

Posted 06 August 2013 - 06:02 AM

If you want to make a template, then you need to create a template (using ControlTemplate markup). A style is simply a way of configuring how a control looks, as you'll see: you can set colours, font, alignment etc.

You might start with this:
<ControlTemplate x:Key="FourButton">
        <StackPanel Orientation="Vertical">
            <Button Name="Button1" Content="Button1"/>
            <Button Name="Button2" Content="Button2"/>
            <Button Name="Button3" Content="Button3"/>
            <Button Name="Button4" Content="Button4"/>
        </StackPanel>
    </ControlTemplate>

Which can then be used like:
<Button Template="{StaticResource FourButton}"/>


As you see, I've created a template for a control that actually includes 4 buttons. I'm then attaching that template to a Button, since that inherits from Control. As for the responses of those buttons, they're not doing anything right now. You'd have to bind Commands and add a binding that includes those commands. Personally, I think you'd be better making a UserControl (View) with a ViewModel behind - the VM could have 4 ICommands, then you could create that VM with the ICommands you want for each instance of the View. This backs up what tlhIn`toq said.

This post has been edited by MrShoes: 06 August 2013 - 06:03 AM

Was This Post Helpful? 0
  • +
  • -

#5 oyyou  Icon User is offline

  • D.I.C Head

Reputation: 28
  • View blog
  • Posts: 196
  • Joined: 26-April 10

Re: Multiple Buttons in one object (XAML)

Posted 06 August 2013 - 06:10 AM

View PostMrShoes, on 06 August 2013 - 06:02 AM, said:

<ControlTemplate x:Key="FourButton">
        <StackPanel Orientation="Vertical">
            <Button Name="Button1" Content="Button1"/>
            <Button Name="Button2" Content="Button2"/>
            <Button Name="Button3" Content="Button3"/>
            <Button Name="Button4" Content="Button4"/>
        </StackPanel>
    </ControlTemplate>


Okay, that seems like a good way of going around it.
How would you go around binding those buttons to commands?
I could probably do it directly into the template, but then what would be the point in the template.

I guess there would be some way in doing it when I call the template?
Was This Post Helpful? 0
  • +
  • -

#6 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Multiple Buttons in one object (XAML)

Posted 07 August 2013 - 12:02 AM

Every way I can think of doing this is a total hack, and I wouldn't recommend it. In fact, I really strongly urge you to make this a user control with a view model binding commands to it.

I'll spend some time thinking of another way, but it wouldn't be better.

EDIT: Even if I did create a template targeting a class, that would probably end up just being a custom User Control, so I'd be creating myself more work.

This post has been edited by MrShoes: 07 August 2013 - 12:34 AM

Was This Post Helpful? 0
  • +
  • -

#7 oyyou  Icon User is offline

  • D.I.C Head

Reputation: 28
  • View blog
  • Posts: 196
  • Joined: 26-April 10

Re: Multiple Buttons in one object (XAML)

Posted 07 August 2013 - 01:33 AM

So I did end up using a UserControl.
It's still a bit messy, simply because I've never done it before.. And databinding is a bit of a pain at the minute.. But it is working!
<UserControl x:Class="Money_Manager.Resources.DateChanger"
             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" Height="50">
    <UserControl.Resources>
        <ResourceDictionary>
            <Style x:Key="SmallButton" TargetType="{x:Type Button}">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="MinWidth" Value="25"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid x:Name="Chrome" Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Foreground" Value="#0000FF"/>
                                    <Setter Property="Opacity" TargetName="Chrome" Value="0.8"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Border x:Name="Rounded" BorderThickness="0" CornerRadius="10" Background="White"/>
        <DatePicker x:Name="datePicker"  Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top"
                    SelectedDate="{Binding Date, UpdateSourceTrigger=PropertyChanged}"/>


        <UniformGrid HorizontalAlignment="Stretch" Rows="1" VerticalAlignment="Stretch" Margin="0,24,0,0" >
            <UniformGrid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Rounded}"/>
            </UniformGrid.OpacityMask>
            <Button Style="{DynamicResource SmallButton}" Content="&lt;&lt;" Command="{Binding One}"/>
            <Button Style="{DynamicResource SmallButton}" Content="&lt;" Command="{Binding Two}"/>
            <Button Style="{DynamicResource SmallButton}" Content=">" Command="{Binding Three}"/>
            <Button Style="{DynamicResource SmallButton}" Content=">>" Command="{Binding Four}"/>
        </UniformGrid>

    </Grid>
</UserControl>


        <local:DateChanger x:Name="StartDate" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,56,0,0" />
        <local:DateChanger x:Name="EndDate" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,56,0,0" />



Sorry about all the code, but that's what I've when with.
I gave my 2 objects names, so that I could bind them outside of the XAML (In the class), they're both bound to different contexts. Like I said messy.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1