How to overwrite a nested style property in xaml/UWP - c#

I want a red button. I cannot get a red button, and I think the reason is that I cannot overwrite the template property of the style all of my buttons default to.
The button itself is bare-bones, and setting its Background does not change its color:
<Button x:Name="redButton" Content="Red Button" Width="180" Height="80" Background="Red"/>
The style it defaults to:
<Style x:Key="ButtonBase" TargetType="Button">
<Style.Setters>
<Setter Property="Foreground" Value="{StaticResource ButtonForeground}" />
<Setter Property="FontSize" Value="{StaticResource ButtonFontSize}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="80" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Width="Auto">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ContentPresenter
x:Name="Content"
Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- -->
<!-- About a hundred lines of code -->
<!-- -->
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
The grid immediately inside of "RootGrid" is what I want to have a red background. What is the simplest way of getting a red button with this style?

Set a TemplateBinding for the Background property of the Grid in the ControlTemplate:
<Grid x:Name="RootGrid" Width="Auto">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{TemplateBinding Background}">

You need override template of button:
<Button Content="sample button">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Red" BorderBrush="DimGray" BorderThickness="1" CornerRadius="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>

Related

Why isnt my button changing colors on MouseOver?

So this is my XAML and for some reason it's not changing colors on mouseover, I added the triggers for it and I thought that would do it, when I hover over the button its not doing anything at all, why is that?
<Button Click="ButtonBase_OnClick" Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
<Grid>
<Image IsHitTestVisible="False" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
<TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
</Grid>
</Button>
<Window.Resources>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
Its not changing because you modified the control template of Button to:
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2"
Note the hard-coded background color. No matter what you do to the button's Background property it won't take effect since its not used. If you want to use that property in your template you need a TemplateBinding:
Background="{TemplateBinding Background}"
Then in the style set the default to your original value.
<Setter Property="Background" Value="#2d2d30"/>

C# WPF ComboBox with rounded corners IsMouseOver won't work

I found this code on doing rounded corners on combobox, I have modifyed it a little, but I have two Issues:
1) The mouseover on the combobox (textbox + togglebutton) won't
work. (I want the standard bahavior with blue background on mouseover, put red just to see if something happend)
2) when I click on the togglebutton I get the popup, but how can I make the textbox clickable to get the popup?
This is what I get:
This is what I want when mouseover (but with rounded corner)
Here are the code:
<Style x:Key="BorderStyle">
<Setter Property="Control.BorderBrush" Value="#A0A1A2" />
<Setter Property="Control.BorderThickness" Value="1" />
<Setter Property="Control.Background" Value="Transparent" />
<Setter Property="Control.Foreground" Value="#101010" />
<Setter Property="Control.FontFamily" Value="Arial" />
<Setter Property="Control.FontWeight" Value="Normal" />
<Setter Property="Control.FontStretch" Value="Normal" />
<Setter Property="Control.FontStyle" Value="Normal" />
</Style>
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="#EAEAEA"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
IsHitTestVisible="False"
Height="{TemplateBinding Height}"
BorderBrush="#A0A1A2"
Background="#EAEAEA"
Style="{StaticResource ComboBoxTextBoxStyle}"/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"/>
<Popup Grid.Column="0"
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
There were a few problems here. Each item I changed in the XAML is commented.
I've also removed the IsMouseOver triggers from the togglebutton and textbox styles, and put it in the ComboBox style. It now sets the background for the whole combobox when the mouse is anywhere over the ComboBox. The two controls in the ComboBox template now have Background="{TemplateBinding Background}", so they'll use the background color set by that trigger.
I've restored IsHitTestVisible on the textbox, but used a TemplateBinding to bind it to the ComboBox's IsEditable property. This will give you the correct mouse pointer over the textbox.
<!--
Better to define this in one place.
I'd do the same with the border color that you use everywhere.
-->
<SolidColorBrush x:Key="ComboBackgroundBrush" Color="#EAEAEA" />
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<!--
Must set this in a setter, not an an attribute on the control instance.
The attribute you had will override anything the style does. This is part of
"dependency property value precedence".
-->
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2"
>
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!--
Needs {TemplateBinding Background} so it uses whatever background brush
the control has at any given moment.
-->
<Border Background="{TemplateBinding Background}"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxOverlayToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="ClickMode" Value="Press" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton
Grid.Column="0"
Style="{StaticResource ComboBoxOverlayToggleButtonStyle}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
/>
<!--
Two problems:
1. IsHitTestVisible="False" prevented it from getting any mouse messages.
2. Background attribute was overriding anything the Style did,
so even if the trigger had fired, its setter would have failed.
Also, Height="{TemplateBinding Height}" is unnecessary. It'll size to its parent Grid.
And BorderBrush="#A0A1A2" should probably be in the Style
-->
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
BorderBrush="#A0A1A2"
Style="{StaticResource ComboBoxTextBoxStyle}"
Background="{TemplateBinding Background}"
IsHitTestVisible="{TemplateBinding IsEditable}"
/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Background="{TemplateBinding Background}"
>
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"
/>
<Popup Grid.Column="0"
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>

How can I stretch a Border inside a Button?

I am writing a form for a WPF app, and I'd like to use the visual states that Button offers. So my XAML is like this right now:
<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Border
Background="White"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock/>
</Border>
</Button>
But my Border is not filling my Button. How can I make the Border fill the Button? Or how can I use the visual states of the Button to affect the Border in another way than wrapping the Border inside the Button?
Or can I apply visual states to my Border? If so, how?
EDIT: the result I want is like this:
So a selected state (white border, blue bg), and a default state (blue border, white bg).
From a hard guess , I think you need to fill the border inside the button.Try the code below.Use ControlTemplate
<Button Grid.Column="0"
Name="GenderMaleButton"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Button.Template>
<ControlTemplate>
<Border Background="#6A6B9A"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" Text="Male"></TextBlock>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
You should have set HorizontalContentAlignment and VerticalContentAlignment to Stretch.
<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Border
Background="White"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock/>
</Border>
</Button>
Try this:
<StackPanel Height="40" Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="GenderButtonStyle" TargetType="{x:Type Button}">
<Setter Property="MinWidth" Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="InternalBorder"
CornerRadius="5"
Padding="5">
<TextBlock x:Name="InternalText"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{TemplateBinding Content}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Male">
<Setter TargetName="InternalBorder" Property="Background" Value="RoyalBlue" />
<Setter TargetName="InternalText" Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="Tag" Value="Female">
<Setter TargetName="InternalBorder" Property="Background" Value="White" />
<Setter TargetName="InternalBorder" Property="BorderBrush" Value="RoyalBlue" />
<Setter TargetName="InternalBorder" Property="BorderThickness" Value="1,1,1,1" />
<Setter TargetName="InternalText" Property="Foreground" Value="RoyalBlue" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!-- Whatever you want -->
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!-- Whatever you want -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button x:Name="MaleButton"
Content="Male"
Style="{StaticResource GenderButtonStyle}"
Tag="Male" />
<Button x:Name="FemaleButton"
Margin="5,0,0,0"
Content="Female"
Style="{StaticResource GenderButtonStyle}"
Tag="Female" />
</StackPanel>
To explain what I've done; I placed two buttons inside a horizontal <StackPanel/> and in its resources subtag I've made a Button Style that can then be assigned to any button you want.
Inside that style I've cracked open the Template and built my own small one that does what you described.
Generally, if a control isn't looking quite the way you want as-is, the best thing to do is open up the template it's made of and make your own.
Like this, you can now define what it should look like when you mouse-over or focus it or press it.

WPF Tab Control Headers on the left side

I want to make my custom tab control style. Headers should be on the left side and the content on the right side. Just like the standard styles can do it:
The selected element on the image above is the grid inside the active item. As you can see, it perfectly aligns next to the headers.
This is my design. The selected element is also the grid inside the active item, but it is just behind the headers instead of next to them. How can I align this grid next to the headers?
These are my styles for the tab item and tab control:
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="AliceBlue" />
<Border
Name="Border"
Grid.Row="1"
BorderThickness="0"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0"
Padding="10,4,4,4"
Background="Transparent"
Height="30"
Width="Auto"
BorderThickness="0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Left"
ContentSource="Header"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="#FFFFFFFF" />
<Setter TargetName="Border" Property="BorderBrush" Value="#FF4576a9"></Setter>
<Setter TargetName="Border" Property="BorderThickness" Value="6, 0, 0, 0"></Setter>
<Setter TargetName="Border" Property="Padding" Value="4"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="Yellow" />
<Setter Property="Foreground" Value="Orange" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you.
In your Custom Template, you need to set Grid.Column instead of Grid.Row since your grid is now 2 cols/1 row instead of 1 col/2 rows
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ...>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabPanel
Name="HeaderPanel" Grid.Column="0" ... />
<Border Name="Border" Grid.Column="1" ... >
<ContentPresenter ... />
</Border>
</Grid>
</ControlTemplate>
You need not to create a custom control. You can use TabStripPlacement property of tabcontrol to achieve this functionality.
<TabControl TabStripPlacement="Left">
<TabItem Header="Tab1">
</TabItem>
<TabItem Header="Tab2">
</TabItem>
</TabControl>
You can refer http://www.wpf-tutorial.com/tabcontrol/tab-positions/ or https://msdn.microsoft.com/en-us/library/system.windows.controls.tabcontrol.tabstripplacement(v=vs.110).aspx

Texbox with button in it

How can I create an TextBox in WPF ( With XAML ) that there is an button inside it, Just like Google Chrome Adressbar.
I want somethings like the picture below :
And then how can I change the position of the button to the right and left ? ( I'm using C# )
You could nest the button inside a Grid on top of the TextBox, since it sounds like you only need to use this once:
e.g.
<Grid>
<TextBox Text="Hello" />
<Button HorizontalAlignment="Right" Content="Click Me" />
</Grid>
The only issue with this is that the text will show under the button. An alternative is to make your own usercontrol or to edit the controltemplate of the textbox (but this will probably not have the functionality you want).
I'd create a textbox in the left column of a 2 column grid, then the button in the right column. Then remove the background and border on the textbox and put this background/border on the grid. This will give the appearance of a textbox with a button in where the text can't go underneath the button
e.g.
<Border BorderBrush="LightGray" BorderThickness="1" Height="30">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox VerticalAlignment="Center" BorderBrush="Transparent" Background="Transparent" Text="Hello World this is a really long bit of text that wont go underneath the button (it will get clipped)"></TextBox>
<Button Content="Click me" Grid.Column="1" Margin="4"></Button>
</Grid>
</Border>
Only problem you have with that is that you don't get the chrome hover effect etc etc. Usercontrol with control template is your best option, but this gives you some ideas
The way to do this :
<Border x:Name="TextboxBorder" BorderBrush="#FFB8AAAA" BorderThickness="1" Grid.Column="2" Margin="3,1.5,4.084,1.5" Height="27" Background="White" CornerRadius="3">
<Grid x:Name="TextboxGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="33"/>
</Grid.ColumnDefinitions>
<Button x:Name="btn" Grid.Column="1" Margin="3.5,4.833,4.5,3.5" BorderBrush="{x:Null}" Style=" {DynamicResource SearchButtonStyle}" >
<Button.Background>
<ImageBrush ImageSource="Images/search.png"/>
</Button.Background>
</Button>
<TextBox Padding="0,1.2,0,0" x:Name="txt" Margin="1.541,0.5,2.041,0.5" TextWrapping="Wrap" Text="سلام" BorderThickness="0" FontSize="16"/>
</Grid>
</Border>
And the Button style is :
<Style x:Key="SearchButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="0" Margin="1.875,0.5,1.75,-0.375" Background="{TemplateBinding Background}" Width="16" Height="16"/>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="ToggleButton.IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And Then WPF Rocks!!!

Categories

Resources