UWP default style for border control

Question

Where can one find UWP's default style for the Border Control?

I'm trying to change the default style so that onmouseover will change the background color.

Usually you can find the default styles here:

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic\generic.xaml

However I can't seem to find a default style for the border class.

Answer 1

If you want to change the background color of Border when mouse over, you can use VisualStateManager to change it. You need to call VisualStateManager.GoToState() method in code-behind in response to the PointerEnter event and activate the "PointerOver" on the visual state. In addition, VisualStateManager states are generally applied to controls(derived from Windows.UI.Xaml.Control.Controls), but Border is not derived from Control. So it's better to put the Border into a usercontrol. For example:

MainPage.xaml:

<Grid>
    <UserControl PointerEntered="Border_PointerEntered" PointerExited="Border_PointerExited" x:Name="MyControl">
        <Border x:Name="MyBorder" Height="30" VerticalAlignment="Top" Margin="50,0" Background="Red">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Target="MyBorder.Background" Value="Red"></Setter>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="PointerOver">
                        <VisualState.Setters>
                            <Setter Target="MyBorder.Background" Value="Green"></Setter>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Border>
    </UserControl>
</Grid>

MainPage.xaml.cs:

private void Border_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    VisualStateManager.GoToState(MyControl, "PointerOver", false);
}

private void Border_PointerExited(object sender, PointerRoutedEventArgs e)
{
    VisualStateManager.GoToState(MyControl, "Normal", false);
}

Update:

You can directly subscribe the PointerEntered and PointerExited event in Border, then change the background in these event without using userControl.

.xaml:

<Grid>
    <Border x:Name="MyBorder" Height="30" VerticalAlignment="Top" Margin="50,0" Background="Red" PointerEntered="Border_PointerEntered" PointerExited="Border_PointerExited">
    </Border>
</Grid>

.cs:

private void Border_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    MyBorder.Background = new SolidColorBrush(Colors.Green);
}

private void Border_PointerExited(object sender, PointerRoutedEventArgs e)
{
    MyBorder.Background = new SolidColorBrush(Colors.Red);
}