CODEWITHSUNDEEP
c#wpfwpf-controls
Talen Kylon
Talen Kylon

Reputation: 1968

Using the same Canvas multiple times in a Grid

I'm designing a Grid that will contain multiple columns of the same Canvas. I've designed the Canvas to have a text box, combo box, and some radio buttons.

I'm a bit confused on a few things)

Adding new columns

Adding canvas to this new column

Adjusting spacing so that the grid can hold a max of 5 columns(Canvases), and then the horizontal scroll bar is presented.

Here's what I've got so far:

    <Grid Height="379" Margin="35,0,35,65" VerticalAlignment="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Canvas Name="userCanvas" Grid.Column="0" Margin="0,0,707,0" RenderTransformOrigin="0.606,0.499" >
            <TextBox Height="23" Name="btn_Test" Canvas.Top ="10" Canvas.Left="10" Width="125" HorizontalAlignment="Center">Enter Input:</TextBox>
            <ComboBox Canvas.Top="50" Canvas.Left="10" Width="125">Combo Box</ComboBox>
            <RadioButton Canvas.Top="100" Canvas.Left="10">Radio Button1</RadioButton>
            <RadioButton Canvas.Top="120" Canvas.Left="10">Radio Button2</RadioButton>
            <RadioButton Canvas.Top="140" Canvas.Left="10">Radio Button3</RadioButton>
            <RadioButton Canvas.Top="160" Canvas.Left="10">Radio Button4</RadioButton>
        </Canvas>
    </Grid>

Upvotes: 0

Views: 394

Answers (1)

devuxer
devuxer

Reputation: 42384

Assuming you are trying to add columns dynamically at runtime, you probably want an ItemsControl not a Grid. An ItemsControl lets you lay out repeating elements that all share the same template.

I would start out with something like this:

<ItemsControl Margin="10"
              ItemsSource="{Binding Columns}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Canvas>
        <TextBox Height="23" Name="btn_Test" Canvas.Top="10" Canvas.Left="10" Width="125" HorizontalAlignment="Center">Enter Input:</TextBox>
        <ComboBox Canvas.Top="50" Canvas.Left="10" Width="125">Combo Box</ComboBox>
        <RadioButton Canvas.Top="100" Canvas.Left="10">Radio Button1</RadioButton>
        <RadioButton Canvas.Top="120" Canvas.Left="10">Radio Button2</RadioButton>
        <RadioButton Canvas.Top="140" Canvas.Left="10">Radio Button3</RadioButton>
        <RadioButton Canvas.Top="160" Canvas.Left="10">Radio Button4</RadioButton>
      </Canvas>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Your DataContext will need to contains a property Columns, which must be some kind of IEnumerable<Column>, where each Column contains data and commands you need for the controls in your Canvas.

Update

As for how to do this, I first would recommend that you read up on the MVVM design pattern, which results in code that is far more maintainable, testable, and reusable.

In the meantime, though, the simplest thing you can do to see something on the screen is to do the following:

First, put this in the code behind (e.g., MainWindow.xaml.cs):

public IEnumerable<Column> Columns { get; set; }

public MainWindow()
{
    Columns = GetColumns();
    InitializeComponent();
}

private IEnumerable<Column> GetColumns()
{
    return Enumerable.Range(0, 5)
        .Select(x => new Column { Title = "Column " + x });
}

Second, create a new Column class:

public class Column
{
    public string Title { get; set; }
}

Third, change your TextBox to the following:

<TextBox Height="23"
         Name="btn_Test"
         Canvas.Top="10"
         Canvas.Left="10"
         Width="125"
         HorizontalAlignment="Center"
         Text="{Binding Title}" />

I didn't have a chance to test this, but if it works as I planned, you should see five columns lined up horizontally, each with its own title ("Column 1", "Column 2", etc.).

Upvotes: 1

Related Questions