C# - Button with image as the visual

it is sometime useful to use a imgae as the content of the Button, a picture has more meaning than the humdrum buttons. 

 

Below shows how you can make such a button.

 

You first define a button style. (where you can find such a button style from say Infragistics .xaml files)

 

 

<Style TargetType="Button" x:Key="ExpanderStyle">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="Border" DataContext="{x:Null}"
                        Background="Transparent">
                    <ContentPresenter Margin="2" HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      RecognizesAccessKey="True"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

 

then you can create such a button, settings its content property through the use of Button.Content.

 

<Button
    x:Name="templatedButton"
    Style="{StaticResource ExpanderStyle}"
    Padding="{Binding ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRow}}, Converter={StaticResource RowStateDisplayElementHeightConverter}, ConverterParameter=-0.45}"
    Height="{Binding ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRow}}, Converter={StaticResource RowStateDisplayElementHeightConverter}, ConverterParameter=0.85}"
    Width="{Binding ActualHeight, RelativeSource={RelativeSource Mode=Self}}">
    <Button.Visibility>
        <!-- <MultiBinding Converter="{StaticResource RowStateDisplayElementVisibilityConverter}">
            <Binding Path="AutoIndentRows" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type local:GridControl}}" />
            <Binding />
        </MultiBinding> -->
    </Button.Visibility>
    <Button.Content>
        <Image IsHitTestVisible="False" SnapsToDevicePixels="True" 
               Source="{Binding State, Converter={StaticResource RowStateDisplayValueConverter}}">
        </Image>
    </Button.Content>
    <Button.InputBindings>
        <MouseBinding 
            Gesture="LeftClick"
            Command="{Binding DataContext.ExpandCollapseCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}}" 
            CommandParameter="{Binding}"/>
        <MouseBinding 
            Gesture="Shift+LeftClick"
            Command="{Binding DataContext.ExpandCollapseAllCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}}" 
            CommandParameter="{Binding}"/>
        <KeyBinding 
            Gesture="Space"
            Command="{Binding DataContext.ExpandCollapseCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}}" 
            CommandParameter="{Binding}"/>
        <KeyBinding 
            Gesture="Shift+Space"
            Command="{Binding DataContext.ExpandCollapseAllCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}}" 
            CommandParameter="{Binding}"/>
    </Button.InputBindings>
</Button>

 

and last, you may use the following to convert a image (bitMap) to some BitmapImage (BitmapImage)

 

 

internal class RowStateDisplayValueConverter: IValueConverter
  {
    private static BitmapImage Collapse;
    private static BitmapImage Expanded;

    static RowStateDisplayValueConverter()
    {
      Collapse = GetBitmapImage(Properties.Resources.Collapse);
      Expanded = GetBitmapImage(Properties.Resources.Expanded);
    }

    static BitmapImage GetBitmapImage(System.Drawing.Bitmap bitmap)
    {
      using (var stream = new MemoryStream())
      {
        bitmap.Save(stream, ImageFormat.Png);
        stream.Seek(0, SeekOrigin.Begin);
        var bitmapImage = new BitmapImage();
        bitmapImage.BeginInit();
        bitmapImage.StreamSource = stream;
        bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
        bitmapImage.EndInit();
        return bitmapImage;
      }
    }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
      switch ((RowState) value)
      {
        case RowState.Collapsed:
          return Collapse;
        case RowState.Expanded:
          return Expanded;
        default:
        case RowState.Leaf:
        case RowState.Hidden:
          return null;
      }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
      throw new NotSupportedException();
    }
  }

 

 

In the above, the image of is stored as some resources in the .xaml file.