Add Canvas and TextBlocks to giant Button in c#

Question

I want to be able to add giant buttons to my ItemsControl. The giant button should contain a Canvas with multiple TextBlocks in it, like the Button in the following XAML code:

<DockPanel>
    <Button DockPanel.Dock="Right" Click="add_Click">Add</Button>

    <ItemsControl Name="itemsControl">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <Button Width="450" Height="150" Margin="5" Name="button1" Background="DarkGreen">
            <Canvas>
                <TextBlock Canvas.Right="80" Canvas.Bottom="30" Background="RoyalBlue" Width="60" TextAlignment="Center" Name="person1">OR1</TextBlock>
                <TextBlock Canvas.Right="10" Canvas.Bottom="30" Background="SkyBlue" Width="60" TextAlignment="Center" Name="person2">Smith</TextBlock>
                <TextBlock Canvas.Left="40" Canvas.Bottom="30" Background="Goldenrod" Width="60" TextAlignment="Center" Name="person3">CAM1</TextBlock>
                <TextBlock Canvas.Left="110" Canvas.Bottom="30" Background="HotPink" Width="60" TextAlignment="Center" Name="person4">Doe</TextBlock>
            </Canvas>
        </Button>
    </ItemsControl>
</DockPanel>

How can I add a giant button like the one in my XAML in my c# add_Click function? I have tried searching online, but haven't been able to find anything that achieves something similar to this.

score 0 · Answer 1 · edited May 23 '17 at 12:16

You have a few options depending on what you want to do. If you only want to "add" a small number of buttons (2 - 3) you could change the visibility of each button in your add_Click method.

button1.Visibility = Visibility.Collapsed;

This is not the best option but it is technically easy.

The better approach would be to build a user control containing everything you want. Then create an observable collection of these buttons in your view model. Once this is done you can bind the item control itemsource to your collection.

Finally, in your codebehind you can create collections of these buttons e.g.

GiantButtonCollection.Add(new GiantButton())

This is much better (but requires more work/knowledge)

Add Canvas and TextBlocks to giant Button in c#

1 Answers1