I have a MahApps button as follows:
<Button Style="{StaticResource MahApps.Styles.Button.Chromeless}" Foreground="Blue" Content="{icon:Modern Kind=Add}"></Button>
I don't want it to have a transparency effect, but I don't know how to do it.
I tried to set the Foreground property and so on, but to no avail.
You can simply set the Background. The Foreground only affects the glyph or text content.
<Button Style="{StaticResource MahApps.Styles.Button.Chromeless}" Foreground="Blue" Background="Red" Content="{iconPacks:Modern Kind=Add}"/>
Alternatively, use any of the other Button styles that already have a background set.
<Button Style="{StaticResource MahApps.Styles.Button.Flat}" Foreground="Blue" Content="{iconPacks:Modern Kind=Add}"/>
<Button Style="{StaticResource MahApps.Styles.Button.Square}" Foreground="Blue" Content="{iconPacks:Modern Kind=Add}"/>
Related
I want to Add an Icon and then Aside the Button text, But when I add the fontAwesome Icon the text disapears, here my Button WPF code:
<Button fa:Awesome.Content="Adjust" Content="My Text" Background="#23282D" Foreground="#F1F1F1" FontSize="16" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" />
The Icon is here but the Text not, When I remove the Icon the text comes back again. I tried to play with Alignment and Searching here and on other Forums but can't figure out why this not work. Any ideas what I'm doing wrong?
The simplest way is to set the content of the button to a container (e.g. Grid or StackPanel) containing a TextBlock for the caption and an ImageAwesome control for the icon, setting the appropriate properties of each control as required.
<Button>
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Adjust" />
<TextBlock Text="My Text" />
</StackPanel>
</Button>
I am working with WPF, and what I want to do is to set opacity and background color of my button but I dont want to affect content inside my button. I tried few ways but unfortunately that did not work.
I found this style and I would like to apply something like that:
This is my numeric keyboard: ( I AM TRYING TO EDIT BTN 7) :
As you can see guys, unfortunately I could not set opacity of my button without affecting the content inside.
Here is my XAML code (focus on btn 7):
<StackPanel Height="50" Orientation="Horizontal" Margin="0,0,0,5">
<Button FontSize="15" FontWeight="Bold" x:Name="btn7" Foreground="#83D744" Click="btn7_Click" BorderBrush="#83D744" BorderThickness="0.5" Content="7" Width="80" RenderTransformOrigin="0.557,0.693" d:LayoutOverrides="HorizontalAlignment" Background="Black" Opacity="0.2" Margin="0,0,5,0" />
<Button FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn8" Click="btn8_Click" Content="8" Width="80" Background="#FF50504F" Margin="0,0,5,0"/>
<Button FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn9" Click="btn9_Click" Content="9" Width="80" d:LayoutOverrides="HorizontalAlignment" Background="#FF50504F"/>
</StackPanel>
So could anyone help me please how to solve this thing..
Thanks!
add transparency to a brush used for Background
hex code for Black color is #000000
change alpha channel to make it semi-transparent (Background="#50000000") and remove Opacity="0.2"
<Button x:Name="btn7"
FontSize="15" FontWeight="Bold" Foreground="#83D744"
Click="btn7_Click"
BorderBrush="#83D744" BorderThickness="0.5"
Content="7" Width="80" RenderTransformOrigin="0.557,0.693"
d:LayoutOverrides="HorizontalAlignment"
Background="#50000000" Margin="0,0,5,0" />
Make the opacity of the button 0.2 to 1
Expectation:
Before Clicked -> Once Clicked -> After Release
What is actually happening:
Before Clicked -> Once Clicked -> After Release
So the border of the button stays green till the user presses another button (the other button gets green). How can I override that behavior? And if I can't then I want to remove the whole green-border thingy. I couldn't do that through the properties. Border thickness is 0 and no border brush on this button. So how can I do that? Please and thanks
EDIT:
XAML
<Button x:Name="UpButton" Margin="0,5,5,0" Grid.Row="1" Grid.Column="1" PreviewMouseUp="UpButton_PreviewMouseUp" BorderThickness="0" >
<StackPanel Height = "90" >
<TextBlock x:Name="UpButtonText" Text="Up" FontSize="13" Width="18" Margin="0,2,0,4"/>
<Image x:Name="UpButtonImage" Width="55" Source="/EZ3D;component/Resources/loc_up.png" Height="58"/>
</StackPanel>
</Button>
Set the image back to the original when mouse exits dimensions of image.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
Example requiring jQuery:
<Button x:Name="UpButton" Margin="0,5,5,0" Grid.Row="1" Grid.Column="1" PreviewMouseUp="UpButton_PreviewMouseUp" BorderThickness="0" >
<StackPanel Height = "90" >
<TextBlock x:Name="UpButtonText" Text="Up" FontSize="13" Width="18" Margin="0,2,0,4"/>
<Image x:Name="UpButtonImage" Width="55" Source="/EZ3D;component/Resources/loc_up.png" Height="58" onmouseout="javascript:$(\"[name^='UpButtonImage']\").attr(\"src\",\"/EZ3D;component/Resources/loc_up.png\");
});";"/>
In a windows 8.1 project i have the following button with a flyout.
<Button x:Name="FilterCompanyMeetings2" Foreground="White" Content="Company Meetings" Margin="15,58,0,0" Height="40" VerticalAlignment="Top" Style="{StaticResource ButtonStyle2}">
<Button.Flyout>
<Flyout>
<StackPanel Width="406">
<TextBlock Text="Insert the value and tap the Send button:" FontSize="16"
FontWeight="SemiLight" FontFamily="Segoe UI"
Margin="0,0,0,10" />
<TextBox x:Name="ValueTextBox" />
<Button Content="Send" HorizontalAlignment="Right"
FontSize="16" Margin="0,10,0,0" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
Im having a issue when i press the button, the flyout appears as expected but all other buttons change their background to a gray color and some of them change their foreground to black.
I dont use this button for anything at the moment, but when i press it that happens.
Why does it change style of other button on the page?
I have this combobox in a windows store app project
<ComboBox Grid.Row="2" x:Name="ContactoSelect" Width="200" Height="50" Margin="114,10,27,510" SelectedIndex="0" Background="White" SelectionChanged="ContactoSelect_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</ComboBox>
i would like to change the color of the arrow, that is black by default.
How can i do that?
Right click on the control from the Design view
Select the option Edit Style>Edit a copy
A style will be created for the control in the xaml inside Page.Resources as ComboBoxStyle1(name varies according to your x:name)
You will find
<TextBlock x:Name="DropDownGlyph" Grid.Column="1" Foreground="{StaticResource ComboBoxArrowForegroundThemeBrush}" FontWeight="Bold" FontSize="{StaticResource ComboBoxArrowThemeFontSize}" FontFamily="{StaticResource SymbolThemeFontFamily}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,6,4" Text="" VerticalAlignment="Center"/>
Change the Foreground to the desired color you want.
eg: Foreground="Red" or any other resource binding.
You can define the style globally in your App.xaml so that it can be used else where as below
<ComboBox HorizontalAlignment="Left" Margin="187,130,0,0" VerticalAlignment="Top" Width="120" Style="{StaticResource ComboBoxStyle1}"/>
If you want to change the arrow for all ComboBox objects in your project you could add the following line to your App.xaml file and change "#FF000000" to the color you want.
<SolidColorBrush x:Key="ComboBoxArrowForegroundThemeBrush" Color="#FF000000" />
You might also be able to do this on a page/control level by specifying it in the resources.
From ComboBox styles and templates under Dark theme brushes