I would like to use the basic grip. but I don't see where I could change its position. Now if you look my picture you can see I disabled the borders and gave some shadows to the main rectangle. I would like to keep it that way.
I wonder if there is a simple modification next to this "ResizeMode="CanResizeWithGrip"
Code:
<Window x:Class="Serenity.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Serenity"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="1100" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}" MinWidth="720" MinHeight="480" Icon="Images/CloseBlack.png" ResizeMode="CanResizeWithGrip">
<Grid>
<Rectangle x:Name="MainTable" Fill="#FF1A1A1A" Margin="10" Stroke="Black" StrokeThickness="1.0">
<Rectangle.Effect>
<DropShadowEffect x:Name="Shadow" BlurRadius="13" ShadowDepth="0" Color="Black"/>
</Rectangle.Effect>
</Rectangle>
<Button x:Name="Website" Content="Google" Margin="0,0,38,38" Click="button_Click" Background="#FF48484A" BorderBrush="{x:Null}" Foreground="White" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" AutomationProperties.HelpText="You will close the program." Height="28" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="99"/>
<Rectangle x:Name="TitleBar" Fill="#FF2D2D30" Height="43" Margin="10,10,10,0" Stroke="Black" VerticalAlignment="Top" MouseDown="TitleBar_MouseDown"/>
<Button x:Name="CloseB" Content="Exit" Margin="0,18,19,0" BorderBrush="{x:Null}" Foreground="White" HorizontalAlignment="Right" Width="50" Height="24" VerticalAlignment="Top" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" RenderTransformOrigin="-0.25,1.45" Click="CloseB_Click" Background="#FF48484A" OpacityMask="Black" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</Grid>
I have tried and succeeded
<Style TargetType="{x:Type ResizeGrip}">
<Setter Property="Margin" Value="25"/>
</Style>
Related
I am putting together a very simple WPF Window to demonstrate how the style the end user has asked for looks. As there are a number of repeated button type objects I wanted to make them have a style in the window that can then be transferred to the real application once adjustments have been made.
The problem I face is that the user wishes to have images for their buttons, when I set the background image within the button itself then it shows perfectly and behaves as I want (change of image on mouseover etc). When I move that formatting into the Style everything till works but the background images don't show. I am sure I am missing something very simple but I cannot see it.
The code I have generated is below :-
<Window x:Class="SkinningDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SkinnigDemo"
mc:Ignorable="d"
Title="DemoWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="MainButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FF266C38"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button2.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#220A88"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="Home">
<Grid.Background>
<SolidColorBrush Color="#FF220A88" Opacity="0.15"/>
</Grid.Background>
<Image HorizontalAlignment="Left" Height="68" Margin="10,10,0,0" VerticalAlignment="Top" Width="737" Source="images/Master Logo transparent.png"/>
<TextBlock HorizontalAlignment="Left" Height="62" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="750" Margin="36,96,0,0" Foreground="#FF266C38" FontSize="14" FontWeight="Bold"><Run Language="en-gb" Text="Sample Welcome Text will be placed here once agreed..."/></TextBlock>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="54,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="First functional text will go here..."/></TextBlock>
<Button x:Name="Button1" Style="{StaticResource MainButtonStyle}" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
</Button>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Second Functional Text will go here..."/></TextBlock>
<Button x:Name="Button2" Style="{StaticResource MainButtonStyle}" Content="View Function 2" HorizontalAlignment="Left" Height="50" Margin="472,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="56,294,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Third Functional Text will go here"/></TextBlock>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,295,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Fourth functional text will go here..."/></TextBlock>
<Button x:Name="Button3" Style="{StaticResource MainButtonStyle}" Content="View Function 3" HorizontalAlignment="Left" Height="50" Margin="472,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<Button x:Name="Button4" Style="{StaticResource MainButtonStyle}" Content="View Function 4" HorizontalAlignment="Left" Height="50" Margin="80,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
</Grid>
</Window>
As I say the background images do not display on the screen, but if I remove the style and set it all locally with exactly the same values it works perfectly :-
<Button x:Name="Button1" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
<Button.Background>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Button.Background>
</Button>
Thanks in anticipation of the help.
Playing around with your nicely looking XAML I noticed that you need to say "bind" the Background brush to the root element of your control template which is a border, to get background images displayed.
If you just insert Background="{TemplateBinding Background}" under the line <Border Name="border" it'll basically work out fine., like:
<Border Name="border"
Background="{TemplateBinding Background}"
BorderThickness="0">
I am creating an application in WPF and I wanted rounded corners. I got that. Now that the form is borderless, I am trying to create a rounded rectangle and place it at the top so that it looks like the top bar of a Windows application.
I am unable to do so.
Here is my code:
<Border CornerRadius="50, 0, 50, 0" BorderBrush="Black" BorderThickness="2" Background="GhostWhite">
<Grid Margin="0,0,0,402">
<Rectangle HorizontalAlignment="Left" Height="44" VerticalAlignment="Top" Width="796">
<Rectangle.Fill>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Border Width="800" Height="200" CornerRadius="50,0,0,0" Background="DarkOliveGreen"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
<Grid HorizontalAlignment="Left" Height="403" Margin="0,44,0,-403" VerticalAlignment="Top" Width="796"/>
</Grid>
</Border>
My main form:
What I want:
What I am getting:
You need to make some minor changes to your control structure to achieve it. Following code is tested and working.
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=myBorder}" />
</Grid.OpacityMask>
<Border x:Name="myBorder" CornerRadius="50,0,50,0" Background="GhostWhite" BorderBrush="Black" BorderThickness="2"/>
<Rectangle HorizontalAlignment="Left" Height="44" VerticalAlignment="Top" Width="796">
<Rectangle.Fill>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Border Width="800" Height="200" CornerRadius="50,0,0,0" Background="DarkOliveGreen"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
Tested and worked.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Controls="clr-namespace:WpfTester.Controls" x:Class="WpfTester.MainWindow"
mc:Ignorable="d"
WindowStyle="None"
AllowsTransparency="True"
Title="MainWindow" Height="1000" Width="1000" Loaded="Window_Loaded" MouseDown="Window_MouseDown">
<Window.Background>
<SolidColorBrush Opacity="0.0" Color="White"/>
</Window.Background>
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Border CornerRadius="50, 0, 0, 0" BorderBrush="Black" BorderThickness="2,2,2,0" Background="DarkOliveGreen">
</Border>
</Grid>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="2,0,2,0" Background="White">
<Grid Name="Body">
</Grid>
</Border>
<Border Grid.Row="2" CornerRadius="0, 0, 50, 0" BorderBrush="Black" BorderThickness="2,0,2,2" Background="White">
</Border>
</Grid>
you can add your contents on which named "Body"
Added : Changed my solution cuz of background:white area on rounded edges.
First of all, thank you for taking your time to read this.
Im pretty new to WPF and especially to using MahApps - http://mahapps.com
Im having problems switching between pages that I have created using MahApps in my window.
Here is my starting window (MainWindow):
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" x:Class="WpfApplication.MainWindow"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
Dialog:DialogParticipation.Register="{Binding}"
Title="MainWindow"
Height="600"
Width="800">
<Grid>
<Frame x:Name="Main"/>
</Grid>
Here is the page that I want to move to (I created a frame in the main so I could put the content of this page on it):
<Controls:MetroWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" x:Class="WpfApplication.MainMenu"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
Dialog:DialogParticipation.Register="{Binding}"
Title="MainMenu"
Height="600"
Width="800" NonActiveBorderBrush="#FFC32C2C">
<Grid>
<Image x:Name="Background" Source="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/teaserBackground.jpg" Stretch="UniformToFill">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="17" />
</Image.BitmapEffect>
</Image>
<Image x:Name="Logo" Source="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/Trivia.png" Margin="0,60,0,320" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBox x:Name="Username" Controls:TextBoxHelper.Watermark=" USERNAME" Margin="0,308,0,226" Width="200" Height="35" TextAlignment="Justify" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" />
<TextBox x:Name="Password" Controls:TextBoxHelper.Watermark=" PASSWORD" Margin="0,378,0,156" Width="200" Height="35" TextAlignment="Justify" FontSize="20" FontWeight="Bold" />
<Button x:Name="SignIn" Content="" HorizontalAlignment="Left" Margin="407,435,0,0" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignIn_Click">
<Button.Background>
<ImageBrush ImageSource="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/signIn.png"/>
</Button.Background>
</Button>
<Button x:Name="SignUp" Content="" HorizontalAlignment="Left" Margin="310,435,0,0" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignUp_Click">
<Button.Background>
<ImageBrush ImageSource="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/sign-add-icon.png"/>
</Button.Background>
</Button>
</Grid>
Thank you in advance!
Updated answer:
Frames themselves are meant to load pages and your menu item is inheriting from a window so that will never work.
Here are the mods you need to make:
In your MainWindow.xaml change the Window tag to Controls:MetroWindow (like you have in your MainMenu xaml
In your MainWindow.xaml.cs remove the base class reference for the MainWindow (MainWindow : Window becomes just MainWindow)
In your MainMenu.xaml change Controls:MetroWindow to just UserControl
Back in your MainWindow.xaml, add a ref to your namespace xmlns:my="clr-namespace:WhateverHere"
In MainWindow.xaml, remove the and add your control directly instead
MainWindow.xaml
<Controls:MetroWindow x:Class="WPFDeleteMe.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:my="clr-namespace:WPFDeleteMe"
Title="MainWindow" Height="700" Width="900">
<Grid x:Name="RootGrid">
<my:MainMenu></my:MainMenu>
</Grid>
</Controls:MetroWindow>
MainWindow.xaml.cs
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
}
}
MainMenu.xaml
<UserControl x:Class="WPFDeleteMe.MainMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800">
<Grid>
<Image x:Name="Background" Source="d:\images\doll-161405_960_720.png" Stretch="UniformToFill">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="17" />
</Image.BitmapEffect>
</Image>
<Image x:Name="Logo" Source="d:\images\Carestream_Solutions.gif" Margin="0,0,0,0" Width="150" Height="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button x:Name="SignIn" Content="" HorizontalAlignment="Left" Margin="407,435,0,0" VerticalAlignment="Top" Width="80" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignIn_Click">
<Button.Background>
<ImageBrush ImageSource="d:\images\war_kitten.jpg"/>
</Button.Background>
</Button>
<Button x:Name="SignUp" Content="" HorizontalAlignment="Left" Margin="310,435,0,0" VerticalAlignment="Top" Width="80" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignUp_Click">
<Button.Background>
<ImageBrush ImageSource="d:\images\war_kitten.jpg"/>
</Button.Background>
</Button>
</Grid>
</UserControl>
this is my first time using WPF and I want to know how I can remove the focus border because it is overlapping my current border? I have a white border (bottom only) and I want that to stay.. but I don't want a blue border on selecting the textbox because it overlaps my text box's current border, how can I solve this?
<Window ResizeMode="NoResize" x:Name="Sahara" x:Class="Sahara.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Sahara"
mc:Ignorable="d"
Title="Sahara" Height="499.75" Width="696.525" Background="White" Topmost="True" Icon="C:\Users\ashle\Downloads\Seanau-Support-Bubble-Support-Bubble-1.ico">
<Grid x:Name="Sahara1" Background="#FF6F5499">
<Label x:Name="label" Content="Sign In" HorizontalAlignment="Left" Margin="283,93,0,0" VerticalAlignment="Top" FontSize="29.333" Foreground="White" FontFamily="Verdana Pro Light"/>
<TextBox x:Name="loginUsernameText" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="30" Margin="216,177,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="260" Background="#FF926FB4" Foreground="White" BorderThickness="0,0,0,1" BorderBrush="White" FontStyle="Italic" TextChanged="loginUsernameText_TextChanged"/>
<PasswordBox x:Name="loginPasswordText" PasswordChar="•" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="30" Margin="216,213,0,0" VerticalAlignment="Top" Width="260" Background="#FF926FB4" Foreground="White" FontFamily="Arial" FontSize="16" BorderThickness="0,0,0,1" BorderBrush="White"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="216,261,0,0" VerticalAlignment="Top" Width="260" Height="30" Background="White" Foreground="#FF6F5499"/>
</Grid>
</Window>
You will need to create ControlTemplate for your TextBox
something like this
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<DockPanel>
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<DockPanel>
<ScrollViewer HorizontalAlignment="Stretch" x:Name="PART_ContentHost"/>
</DockPanel>
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
I have a ToggleButton defined like:
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked" >
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
However, I just want the button to be an image, not an image on a button. If I was using a normal Button I would just do something like Style="{DynamicResource NoChromeButton}" in the opening ToggleButton tag. But this does not work.
How can I mimic the whole NoChromeButton thing in a ToggleButton?
EDIT: Editted to include how I do it with regular Buttons:
<Button Style="{DynamicResource NoChromeButton}" Height="17" Margin="0,0,30,0" Name="btnMinimize" VerticalAlignment="Top" Grid.Column="1" Click="btnMinimize_Click" HorizontalAlignment="Right" Width="27" Padding="0" Visibility="Visible">
<Image Source="/some_image.png" Stretch="None" />
</Button>
Just copy/paste this into new WPF project.
<Window x:Class="SOChromeButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="Chromeless" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="54" Height="54">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Style="{StaticResource Chromeless}" Name="tbPinned" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,0" IsChecked="True" >
<Image Source="C:\Temp\info.png"></Image>
</ToggleButton>
</Grid> </Window>
Will this do?
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked"
BorderThickness="0" Background="Transparent">
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>