How Do I Set Multiple Content Dynamically in a Button in WPF

Question

I created the following xaml:

 <Button x:Name="PriceButton">
  <Button.Template>
    <ControlTemplate>
      <Border x:Name="ButtonBorder"
                        CornerRadius="2"
                        Background="{StaticResource DarkReflectionBrush}"
                        BorderBrush="Black"
                        BorderThickness="1" HorizontalAlignment="Stretch">
          <ContentPresenter 
            VerticalAlignment="Center"
            HorizontalAlignment="Left">
          <ContentPresenter.Content>
            <Grid x:Name="ContentGrid" HorizontalAlignment="Left" >
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition  Width="15*"  />
              </Grid.ColumnDefinitions>
              <TextBlock x:Name="Price" Grid.Column="0" FontFamily="Calibri" FontSize="8" 
                         VerticalAlignment="Bottom" Text="{Binding Path=PriceText}"
                         Foreground="{Binding Path=PriceColor}" ></TextBlock>
              <TextBlock x:Name="Main" Grid.Column="1" FontFamily="Calibri" FontSize="14"
                         Text="{Binding Path=MainText}"
                         Foreground="{Binding Path=MainTextColor}" />
              <TextBlock x:Name="Vol" Grid.Column="2" FontFamily="Calibri" FontSize="8" 
                          VerticalAlignment="Bottom" Text="{Binding Path=VolatilityText}"
                         Foreground="{Binding Path=VolatilityColor}" />
            </Grid>
          </ContentPresenter.Content>
        </ContentPresenter>
      </Border>
      <ControlTemplate.Triggers>
        <Trigger Property="Button.IsPressed" Value="true">
          <Setter TargetName="ButtonBorder" Property="Background" Value="{StaticResource PressedBrush}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
          <Setter Property="Opacity" Value="0.5" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Button.Template>
</Button>

Here's the Code Behind:

  public static readonly DependencyProperty PriceTextProperty =
  DependencyProperty.Register(
    "PriceText",
    typeof (string),
    typeof (LivePriceVolButton),
    new FrameworkPropertyMetadata(string.Empty, OnPriceTextChanged));

public string PriceText {
  get {
    return (string)GetValue(PriceTextProperty);
  }
  set {
    SetValue(PriceTextProperty, value);
  }
}

public static readonly DependencyProperty PriceColorProperty =
  DependencyProperty.Register(
    "PriceColor",
    typeof (Color),
    typeof (LivePriceVolButton),
    new FrameworkPropertyMetadata(Colors.White));

public Color PriceColor {
  get {
    return (Color) GetValue(PriceColorProperty);
  }
  set {
    SetValue(PriceColorProperty, value);
  }
}

public static readonly DependencyProperty MainTextProperty =
  DependencyProperty.Register(
    "MainText",
    typeof (string),
    typeof (LivePriceVolButton),
    new FrameworkPropertyMetadata(string.Empty));

public string MainText {
  get {
    return (string) GetValue(MainTextProperty);
  }
  set {
    SetValue(MainTextProperty, value);
  }
}

public static readonly DependencyProperty MainTextColorProperty =
  DependencyProperty.Register(
    "MainTextColor",
    typeof(Color),
    typeof(LivePriceVolButton),
    new FrameworkPropertyMetadata(Colors.White));

public Color MainTextColor {
  get {
    return (Color) GetValue(MainTextColorProperty);
  }
  set {
    SetValue(MainTextColorProperty, value);
  }
}

public static readonly DependencyProperty VolatilityTextProperty =
  DependencyProperty.Register(
    "VolatilityText",
    typeof(string),
    typeof(LivePriceVolButton),
    new FrameworkPropertyMetadata(string.Empty));

public string VolatilityText {
  get {
    return (string) GetValue(VolatilityTextProperty);
  }
  set {
    SetValue(VolatilityTextProperty, value);
  }
}

public static readonly DependencyProperty VolatilityColorProperty =
  DependencyProperty.Register(
    "VolatilityColor",
    typeof(Color),
    typeof(LivePriceVolButton),
    new FrameworkPropertyMetadata(Colors.White));

public Color VolatilityColor {
  get {
    return (Color) GetValue(VolatilityColorProperty);
  }
  set {
    SetValue(VolatilityColorProperty, value);
  }
}

When I insert my user control onto a form like this

 <my:LivePriceVolButton Margin="43.03,0,0,32" x:Name="livePriceVolButton1" 
                       xmlns:my="clr-namespace:MultiTextBlockButton" HorizontalAlignment="Left" 
                       Width="91.703" Height="30" VerticalAlignment="Bottom" 
                       MainText="MID" MainTextColor="LightBlue" PriceColor="Red" PriceText="1234.56"
                       VolatilityText="12.2%" VolatilityColor="Aqua" />

I don't see anything in the button at all. Any ideas?

Thanks

Answer 1

You have to set the DataContext for the Button to be equal to the parent UserControl for your Bindings to work. Try something like this:

<UserControl x:Name="uc" ...>

  <Button x:Name="PriceButton" DataContext="{Binding ElementName=uc}">
    <!--Other code here...-->
  </Button>

</UserControl>

I also see that you're using "Color" as the Type for some of your DependencyProperties. I suggest you change them to "Brush" instead. Otherwise the related bindings (e.g. Foreground="{Binding VolatilityColor}") won't work.