より良いエンジニアを目指して

1日1つ。良くなる!上手くなる!

MaterialDesignXamlでバッジを表示させたい

MaterialDesignXamlでいわゆるバッジを表示させたいな、と

ボタンの右上に表示させる方法であるサンプルは用意されています。

f:id:rimever:20210620135126p:plain

xamlだと以下のようになりますね。

<materialDesign:Badged
  Badge="3">
  <Button
    Content="MAIL" />
</materialDesign:Badged>

ただ、私がやりたいのは以下のような形

f:id:rimever:20210620134827p:plain

その場合は以下のようなコード。

<StackPanel Orientation="Horizontal">
   <TextBlock Text="{Binding CallName.Value}" />
   <materialDesign:ColorZone
       Mode="PrimaryLight"
       CornerRadius="6" Margin="4 0">
       <TextBlock Text="{Binding ReferenceCount.Value}" Margin="4 0"/>
   </materialDesign:ColorZone>
</StackPanel>
````