How can I make a Button with multiple content valu

问题:

My goal is to make a Button that has two Content values.

Imagine a Scrabble tile as a button: it has the large letter in the center and a small number in the lower right. This is the effect I am going for.

I made a button that has two ContentPresenter objects in it, and I have given each of the ContentPresenters a different style. However, I have not found a way to give each of the presenters a separate value (ie, if I set the Content of the button to "X" then both ContentPresenters show "X", albeit in different styles).

How can I achieve my objective? I'm guessing my approach is completely wrong....

回答1:

Bah... I think I know what to do now. I should be making my own control rather than modifying a Button. This would have been obvious to me had I been working in WinForms, but for some reason all this Xaml is making me stupid.

回答2:

Take a look at the Expander sample ControlTemplate at http://msdn.microsoft.com/en-us/library/ms753296.aspx

Expander is a subclass of HeaderedContentControl, it has two "contents": Header and Content

The control template has two ContentPresenter elements, the ContentPresenter that is not bound to the default content property is defined as:

<ContentPresenter ContentSource="Header" />

If you need to use a Button and you don't want to add another property for the second content you can use an attached property and data bind the second ContentPresnter Content property to it.

回答3:

I delaled with creating UserControl with multiple 'content slots' here - it's better than deriving from HeaderedControl as you aren't limited in the number of slots.

Sample usage:

<Window x:Class="TkMVVMContainersSample.Services.TaskEditDialog.ItemEditView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Common="clr-namespace:TkMVVMContainersSample.Views.Common"
    Title="ItemEditView"
    >
    <Common:DialogControl>
        <Common:DialogControl.Heading>
            <!-- Heading string goes here -->
        </Common:DialogControl.Heading>
        <Common:DialogControl.Control>
            <!-- Concrete dialog's content goes here -->
        </Common:DialogControl.Control>
        <Common:DialogControl.Buttons>
            <!-- Concrete dialog's buttons go here -->
        </Common:DialogControl.Buttons>
    </Common:DialogControl>

</Window>