Question

I have a xaml page with 30 togglebuttons on it and I need to bind 4 properties of each togglebutton to a class that I have. I’m able to do the binding, but I’m hoping to find a better solution.

My class currently looks something like this:

public int ToggleButton1Height;
public int ToggleButton1Width;
..
public int ToggleButton2Height;
public int ToggleButton2Width;
..etc

As you can see if I had 4 properties for each togglebutton, that means I need over 120 properties in my class. Is there a better way?

Answer 1

I’m a little curious about your scenario, but here’s the quickest simples solution I can think of. All the code is explained in the comments, but do let me know if you have questions. Of course there’s a ton more solution on how to do this, but I don’t have a lot of details about what are you trying to do. So I hope this works for you. You should be able to just copy paste all this in a new project and have it working.

XAML:

<Window x:Class="StackOverflowTests.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="Window1"
    x:Name="window1"
    Width="800"
    Height="600"
    Loaded="Window1_Loaded">
    <Window.Resources>
        <!-- 
            Create a style so you don't have to define the properties 30 times.
            The style will tell the ToggleButtons which properties in your class they should look at.
            The ToggleButtonClass object will be bound on the code side
        -->
        <Style TargetType="{x:Type ToggleButton}" x:Key="toggleButtonStyle">
            <Setter Property="Height" Value="{Binding ToggleButtonHeight}" />
            <Setter Property="Width" Value="{Binding ToggleButtonWidth}" />
            <Setter Property="Content" Value="{Binding ToggleButtonText}" />
        </Style>
    </Window.Resources>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel x:Name="theStackPanel">
            <!--
                You still have to set the style in each button, in case you add buttons that you don't want to use the properties
                If you don't want to manually set the style, remove the x:Key="toggleButtonStyle" property from the style above
                and also remove the Style="{StaticResource toggleButtonStyle}" from all the toggle buttons below.
            -->         
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
            <ToggleButton Style="{StaticResource toggleButtonStyle}" />
        </StackPanel>
    </ScrollViewer>
</Window>

C#:

using System.Windows;
using System.Windows.Controls.Primitives;

namespace StackOverflowTests
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        // Creating all the classes and setting the DataContext of each ToggleButton
        private void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            int sizeFactor = 0;

            // for each ToggleButton in the StackPanel, create one instance of the ToggleButtonClass
            // and assign it to the DataContext of the ToggleButton, so all the binding in the Style
            // created in XAML can kick in.
            foreach (UIElement element in theStackPanel.Children)
            {
                if (element is ToggleButton)
                {
                    sizeFactor++;

                    ToggleButtonClass toggleButtonClass = new ToggleButtonClass()
                    {
                        ToggleButtonHeight = sizeFactor * 20,
                        ToggleButtonWidth = sizeFactor * 50,
                        ToggleButtonText = "Button " + sizeFactor
                    };

                    (element as ToggleButton).DataContext = toggleButtonClass;
                }
            }
        }
    }

    // your toggle button class
    public class ToggleButtonClass
    {
        public double ToggleButtonHeight { get; set; }
        public double ToggleButtonWidth { get; set; }
        public string ToggleButtonText { get; set; }
    }
}