如何在按钮中有多个内容？

Question

This is my app: This is my Xaml:

    <Grid Name="grd1" Width="202" Margin="-5,0,0,0" Visibility="Visible">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="16*"/>
            <ColumnDefinition Width="31*"/>
        </Grid.ColumnDefinitions>
        <Button VerticalAlignment="Top" Height="43" HorizontalAlignment="Right" Width="196" Grid.ColumnSpan="2" Margin="-8,0,0,0">
            <Button.Content>
                <CheckBox Name="chk_shortcut_1" IsChecked="False" Checked="chk_shortcut_1_Checked" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="165,-19,0,0" />
            </Button.Content>
        </Button>
        <Button VerticalAlignment="Top" Height="43" HorizontalAlignment="Right" Width="196" Margin="-8,48,0,0" Grid.ColumnSpan="2">
            <CheckBox Name="chk_shortcut_2" IsChecked="False" Checked="chk_shortcut_1_Checked" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="165,-19,0,0" />
        </Button>
        <Button VerticalAlignment="Top" Height="43" HorizontalAlignment="Right" Width="196" Margin="-8,96,0,0" Grid.ColumnSpan="2">
            <CheckBox Name="chk_shortcut_3" IsChecked="False" Checked="chk_shortcut_1_Checked" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="165,-19,0,0" />
        </Button>
    </Grid>
</ListBox>

How can I have image and text and CheckBox inside a Button? Because I want to clone button by checking checkboxes in another listbox later

Answer 1

As far as I know, the button that you need is not a pure component, it's a complex control and need to be implemented by yourself or use third party components like Telerik. But a good answer would be: Create a user control. Use a container component and like Grid and split it to 2 section, left and right. At the left side you should add an image component and right side should contain a readonly text or label. define events to be clickable and configure other behaviors as you need. something like below code can be useful but need to spend more time and work on.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="277*"/>
        <ColumnDefinition Width="523*"/>
    </Grid.ColumnDefinitions>
    <Image HorizontalAlignment="Left" Grid.Column="0" Height="100" Margin="103,225,0,0" VerticalAlignment="Top" Width="100"/>
    <Label Content="Label" Grid.Column="1" HorizontalAlignment="Left" Margin="273,238,0,0" VerticalAlignment="Top"/>
</Grid>