I am creating Windows Store App. I use callisto library for create flyout in settings. I have problem with styling buttons. When I mouse over the background and font becomes white…
See the picture (mouse is over second button): 
This is my XAML file:
<UserControl
x:Class="Pomidoro.PomidoroUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pomidoro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<StackPanel x:Name="FlyoutContent">
<Button
Name="ChoosePomidoroButton"
Click="ChoosePomidoroButton_Click"
Content="Choose pomidoro image..."
Background="LightGray"
Foreground="Black"
BorderBrush="Black"
/>
<Button
Name="DefaultPomidoroButton"
Click="DefaultPomidoroButton_Click"
Content="Set default pomidoro image"
Background="LightGray"
Foreground="Black"
BorderBrush="Black"
/>
</StackPanel>
</Grid>
And this is how I create flyout in App.xaml.cs:
// Add an Pomidoro settings
var pomidoro = new SettingsCommand("pomidoro", "Pomidoro image", (handler) =>
{
var settings = new SettingsFlyout();
settings.Content = new PomidoroUserControl();
settings.HeaderText = "Pomidoro";
settings.IsOpen = true;
});
args.Request.ApplicationCommands.Add(pomidoro);
When I tried use default styles…
<Button
Name="DefaultPomidoroButton"
Click="DefaultPomidoroButton_Click"
Content="Set default pomidoro image"
/>
…background, border and foreground was white…and user was unable to see anything.
What should I do to apply default style to have gray button (as it is in many apps in Store)?
The problem is that the default button style uses a white foreground and border brush, and a transparent background brush when your application is using the dark theme. On a Page, the default button style looks just fine:
On the content pane of the Callisto SettingsFlyout, however, the button is invisible, because the content pane’s Background is white. You must have noticed this since you’re setting the Foreground and Background properties of the button manually in your UserControl.
A solution is to define a new style for buttons on the SettingsFlyout, working off of the default button template to do so. The default styles are located here on an 64-bit machine:
I found the default style for the Button control in
default.xamlin this folder.First, I copied over this default style into a new resource dictionary. I set up App.xaml to reference this new resource dictionary like this:
With a bit of work, I tweaked the copied-over default button style and gave it an unique key. Here is the example:
The last step is to set that style on your XAML Button definitions:
And here is how it looks (middle button is in the hover state):