Microsoft-ui-xaml: Documentation: positioning of resources for overwriting is wrong

Created on 4 Apr 2020  ·  4Comments  ·  Source: microsoft/microsoft-ui-xaml

Describe the bug
Overwriting the CornerRadius in app.xaml has for example no effect on the TeachingTip control.
See https://github.com/microsoft/microsoft-ui-xaml/issues/2228#issuecomment-609012999

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary>
                <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
                <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
            </ResourceDictionary>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Version Info

NuGet package version: 2.4.0-prerelease.200322001


| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| November 2019 Update (18363) | Yes |
| May 2019 Update (18362) | |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |


| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop | Yes |
| Mobile | |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context

area-Styling documentation team-Controls

Most helpful comment

Thanks for catching this! I made a PR to fix it on our docs.

All 4 comments

@jp-weber Overriding the OverlayCornerRadius theme resource works for me on the page level:

<Page
    x:Class="UwpTestApp.MainPage"
    <!-- ... -->
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
    <Page.Resources>
        <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
    </Page.Resources>

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="Show TeachingTip" Click="TeachingTipButton_Click" x:Name="TeachingTipButton"/>
        <muxc:TeachingTip x:Name="ToggleThemeTeachingTip1"                   
                          Target="{x:Bind TeachingTipButton}"
                          Title="TeachingTip"                                        
                          Subtitle="TeachingTip content"/>
    </StackPanel>
</Page>

image

On page level it did not work for me strangely. I tried a little bit more and it is probably due to the problem of the order of the resources. The resources must be positioned under the import of muxc. So it works fine.

The documentation would be wrong.
https://docs.microsoft.com/en-us/windows/uwp/design/style/rounded-corner#rounded-corners-and-performance

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary>
                <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
                <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

@kikisaints could you investigate fixing this up?

Thanks for catching this! I made a PR to fix it on our docs.

Was this page helpful?
0 / 5 - 0 ratings