Text on button (with acrylic background) is unreadable

[logixoul]

Describe the bug

When I use the below setup, the text on my buttons becomes unreadable (see screenshot). Btw the same is true for the minimize/maximize/close buttons.

To Reproduce

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="TonemapsterUI.MainWindow"
        Title="TonemapsterUI"
        TransparencyLevelHint="AcrylicBlur"
        Background="Transparent"
        ExtendClientAreaToDecorationsHint="True"
        >
    <Panel>
        <ExperimentalAcrylicBorder IsHitTestVisible="True">
            <ExperimentalAcrylicBorder.Material>
                <ExperimentalAcrylicMaterial
                    BackgroundSource="Digger"
                    TintColor="Black"
                    TintOpacity="0"
                    MaterialOpacity="0.0" />
            </ExperimentalAcrylicBorder.Material>
            <StackPanel>
                <!--<TextBlock>Welcome to Tonemapster!</TextBlock>-->
                <Button Click="LoadSingle">Tonemap a single image</Button>
                <Button Click="LoadMulti">Merge bracketed exposures</Button>
            </StackPanel>
        </ExperimentalAcrylicBorder>
    </Panel>
</Window>

Expected behavior

No response

Avalonia version

11.0.10

OS

Windows

Additional context

No response

[Eugenenoble2005]

Try removing your stackpanel from within the ExperimentalAcrylicBorder. Your content should be after the ExperimentalAcrylicBorder.

<Panel>
        <ExperimentalAcrylicBorder IsHitTestVisible="True">
            <ExperimentalAcrylicBorder.Material>
                <ExperimentalAcrylicMaterial
                    BackgroundSource="Digger"
                    TintColor="Black"
                    TintOpacity="0"
                    MaterialOpacity="0.0" />
            </ExperimentalAcrylicBorder.Material>
        </ExperimentalAcrylicBorder>
                     <StackPanel>
                <!--<TextBlock>Welcome to Tonemapster!</TextBlock>-->
                <Button Click="LoadSingle">Tonemap a single image</Button>
                <Button Click="LoadMulti">Merge bracketed exposures</Button>
            </StackPanel>
    </Panel>

[logixoul]

@Eugenenoble2005 Thanks, but this doesn't change the rendering.

[emmauss]

Your MaterialOpacity and TintOpacity is 0.0. That makes the effect as close to glass as possible, and you can't really see transparent items on glass. Fluent buttons have low alpha and tend to be translucent. Adjust the MaterialOpacity and TintOpacity till you get a suitable transparency. You can also set a semi-transparent background to the StackPanel to give a more visible surface to the buttons to render on. You can have your controls in the ExperimentalAcrylicBorder like you did earlier.