---
# System prepended metadata

title: UWP 半透明画面の作成　Acrylic material／アクリル素材　2021-04-13
tags: [アクリル素材, Acrylic material, UWP]

---

---
lang: ja-jp
breaks: true
---
# UWP 半透明画面の作成　Acrylic material／アクリル素材　2021-04-13

> アクリル素材
> https://docs.microsoft.com/ja-jp/windows/uwp/design/style/acrylic

> XAML コントロール ギャラリー
> Styles→Acrylic
![](https://i.imgur.com/y0xREA0.png)

> UWP アプリに Fluent Design System を実装する方法
> アクリル素材（Acrylic material）
> 
> リソースキーに AcrylicWindow が含まれているリソースがウィンドウの背景を表示するアクリル素材（Background acrylic）で、AcrylicElement が含まれているリソースがアプリ内のアクリル素材（In-app acrylic）です。
また、Accent が含まれているリソースは、Windows の個人用設定でユーザ指定されたアクセントカラーが反映されるアクリル素材です。
> https://qiita.com/4423/items/753b738a5a663be99ef9

## Pageに指定する場合
```xaml=
<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource SystemControlAcrylicWindowBrush}"
    >

</Page>
```

## Gridに指定する場合
```xaml=
<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >
    <Grid
        Background="{ThemeResource SystemControlAcrylicWindowBrush}">
    </Grid>
</Page>
```

## Rectangleに指定する場合
```xaml=
<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >
    <Grid>
        <Rectangle
            Fill="{ThemeResource SystemControlAcrylicWindowBrush}" />
    </Grid>
</Page>
```

## SystemControlAcrylicWindowBrush
![](https://i.imgur.com/9zR2Tp3.png)

## SystemControlChromeLowAcrylicWindowBrush
![](https://i.imgur.com/JC3g1Fr.png)

## SystemControlBaseHighAcrylicWindowBrush
![](https://i.imgur.com/1CrrjWs.png)

## SystemControlBaseLowAcrylicWindowBrush
![](https://i.imgur.com/6mHTwFO.png)

## SystemControlAltHighAcrylicWindowBrush
![](https://i.imgur.com/xxxcfhb.png)

## SystemControlAltLowAcrylicWindowBrush
![](https://i.imgur.com/36gn8hn.png)

## SystemControlAcrylicWindowMediumHighBrush
![](https://i.imgur.com/Js9apCY.png)

## SystemControlBaseHighAcrylicWindowMediumHighBrush
![](https://i.imgur.com/ObLqFOr.png)

## SystemControlChromeHighAcrylicWindowMediumBrush
![](https://i.imgur.com/YU1XEvD.jpg)

## SystemControlChromeMediumAcrylicWindowMediumBrush
![](https://i.imgur.com/pt7S2XW.jpg)

## SystemControlChromeMediumLowAcrylicWindowMediumBrush
![](https://i.imgur.com/Q9SK30e.jpg)

## SystemControlBaseHighAcrylicWindowMediumBrush
![](https://i.imgur.com/kfQJg9U.jpg)

## SystemControlBaseMediumLowAcrylicWindowMediumBrush
![](https://i.imgur.com/aUOUxOs.jpg)

## SystemControlAltMediumLowAcrylicWindowMediumBrush
![](https://i.imgur.com/0m2L9N7.jpg)

## SystemControlAccentAcrylicWindowAccentMediumHighBrush
![](https://i.imgur.com/59kYp6I.png)

## SystemControlAccentDark1AcrylicWindowAccentDark1Brush
![](https://i.imgur.com/k1rHAVc.png)

## SystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush
![](https://i.imgur.com/vIZUEzN.jpg)

###### tags: `UWP` `Acrylic material` `アクリル素材`
