Проблема с шаблоном кнопки в wpf ..?

Question

Я очень новичок в wpf. Я хочу отобразить изображение и текстовый блок в кнопке управления. Поэтому я создал шаблон и привязал изображение к источнику и текстовый блок для имени.

<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
        <ControlTemplate.Resources>
            <Storyboard x:Key="Storyboard1">
                <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                    <EasingThicknessKeyFrame KeyTime="0:0:0.1" Value="1"/>
                    <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="0"/>
                </ThicknessAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
        <Border x:Name="border" BorderBrush="Black" BorderThickness="0" Margin="0,0,-96,-21">
            <Grid>
                <Image HorizontalAlignment="Left" Margin="8,8,0,8" Width="34" Source="{Binding Source}"/>
                <TextBlock Margin="46,8,8,8" TextWrapping="Wrap" Text="{Binding Name}" FontSize="16" Foreground="Black"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Trigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
                </Trigger.EnterActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Затем я применил этот шаблон к кнопке. И я попытался добавить контент через событие загрузки окна.

btnAddGropu.Content = new ToolButton() { Source = "Icons/add.png", Name = "Add Group" };

Класс ToolButton

class ToolButton
{
    public string Source { get; set; }
    public string Name { get; set; }
}

Когда я выполнил программу с волнением и у меня не было кнопки вообще ... !!! Так в чем проблема..? Как я могу использовать этот шаблон ..?

Спасибо Заранее

Answer 1

Предполагая, что вы установили свою кнопку с шаблоном управления, как показано ниже ...

    <Button Template="{StaticResource ButtonControlTemplate1}"/>

Решение для вашей проблемы - установить DataContext кнопки, а неего Content.

     btnAddGropu.DataContext
       = new ToolButton() { Source = "Icons/add.png", Name = "Add Group" };

Хотя я должен настаивать на том, чтобы вы изменили способ отображения текста и изображения с помощью ControlTemplate, который всегда ожидает «специфический» DataContext, например ToolButton.

Шаблоны управления и привязка данных, шаблоны данных и эффекты действий пользователя никогда не следует смешивать друг с другом.

: -)

Answer 2

Я думаю, что для правильной обработки настройки стандартного элемента управления вы должны использовать ContentPresenter , у которого есть Style нужной кнопки.

Например, посмотрите здесь: Пример

Answer 3

Вы установили этот шаблон на кнопку?Вы должны установить его, потому что вы дали своему ControlTemplate имя, что делает его явным.Без имени оно будет неявным, поэтому оно будет использоваться автоматически.

, поэтому

<Button Template="{StaticResource ButtonControlTemplate1}"/>

В вашем примере есть еще пара моментов, на которые я хотел бы обратить внимание.Вы устанавливаете в своей кнопке Content на экземпляр вашего класса ToolButton, что хорошо.Этот класс, очевидно, не является элементом управления пользовательского интерфейса WPF, поэтому вы должны указать WPF, что с ним делать.Для этого DataTemplate, вы определяете DataTemplate для своего класса ToolButton, и теперь WPF знает, как его отобразить.

К сожалению, в кнопке Button Template есть еще одна проблема.Кнопка имеет тип ContentControl, что позволяет показывать любой контент.Вы уже использовали свойство Content.Но вы полностью переопределяете ControlTemplate, помните, что ControlTemplate определяет, как будет выглядеть элемент управления, без его шаблона он абсолютно ничего не показывает.Теперь, глядя на ваш шаблон, я пропускаю специализированный элемент управления ContentPresenter, который говорит шаблону «Когда у кнопки есть контент, поместите его здесь», поэтому ContentPresenter является заполнителем для фактического набора контента.Теперь вспомните, что я сказал о DataTemplate, и вы увидите, как эти вещи работают вместе.

Еще одна крошечная вещь: вы используете привязки в своем шаблоне, но вы никогда не устанавливаете DataContext, вы просто устанавливаете содержимое,но контент действителен только внутри ContentPresenter или, что лучше, в вашем DataTemplate.Есть несколько «правил» вокруг DataContext.Краткое резюме: DataContext может быть унаследован и автоматически устанавливается в DataTemplate.

. Надеюсь, это поможет вам abit.веселит.

Answer 4

Я думаю, что вам нужно что-то вроде этого:

<Button>
  <StackPanel>
    <Ellipse Height="40" Width="40" Fill="Blue"/>
    <TextBlock TextAlignment="Center">Button</TextBlock>
  </StackPanel>
</Button>

MSDN

вы можете заменить StackPanel на Grid или DockPanel и встроить любые элементы управления в этот контейнер.