UWPで使用するコンポーネントの見た目を継承する方法

前提・実現したいこと

UWP初心者です

Visual Studio 2019で作成したUWPアプリを使用しているのですが、
見た目や処理が同じPageが多々でてきますので、
なにかベースになるものを用意し、
そこから派生して、
オリジナルのコンポーネントを作成していこうと思ったのですが、
下記の"該当のソースコード"で確認してみたところ

のような見た目になりました。
継承先(TestGrid2)のボタンだけ表示されるなら、
まだわかるんですが、
なぜか継承元(TestGrid1)の見た目が表示されました。

UWPでxamlを継承することはできないということでしょうか？
Styleなどでテンプレートを定義すれば見た目は何とかなりそうですが、
コードビハインドなどでStyleの内部に定義したものにアクセスしづらいなど
があるのでこの方法では解消できませんでした。
このように見た目と処理をベースから派生させるにはこのように作成すればよろしいでしょうか？

このようなサイトでの質問もまだ慣れておらず、情報不足ありましたら
ご指摘ください。
宜しくお願い致します。

該当のソースコード

ただのテスト用のPage
Page.xaml

C#
1<Page
2    x:Class="TestApp.MainPage"
3    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5    xmlns:local="using:TestApp"
6    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8    mc:Ignorable="d"
9    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
10
11    <Grid>
12        <Grid.RowDefinitions>
13            <RowDefinition Height="60*" />
14            <RowDefinition Height="90*" />
15        </Grid.RowDefinitions>
16
17        <local:TestGrid2 x:Name="Test_Grid2"
18                         VerticalAlignment="Stretch"
19                         HorizontalAlignment="Stretch"/>
20
21    </Grid>
22</Page>

継承元グリッド
TestGrid1.xaml

C#
1<Grid
2    x:Class="TestApp.TestGrid1"
3    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5    xmlns:local="using:TestApp"
6    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8    mc:Ignorable="d">
9
10    <Grid.ColumnDefinitions>
11        <ColumnDefinition Width="60*" />
12        <ColumnDefinition Width="90*" />
13    </Grid.ColumnDefinitions>
14
15    <Button x:Name="TestButton"
16            Content="テスト"
17            Grid.Column="1"
18            VerticalAlignment="Stretch"
19            HorizontalAlignment="Stretch">
20
21    </Button>
22</Grid>

TestGrid1.xaml.cs

C#
1public partial class TestGrid1 : Grid
2{
3    public TestGrid1()
4    {
5        this.InitializeComponent();
6    }
7}

継承先グリッド
TestGrid2.xaml

C#
1<local:TestGrid1
2    x:Class="TestApp.TestGrid2"
3    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5    xmlns:local="using:TestApp"
6    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8    mc:Ignorable="d">
9
10    <Grid.ColumnDefinitions>
11        <ColumnDefinition Width="60*" />
12        <ColumnDefinition Width="90*" />
13    </Grid.ColumnDefinitions>
14
15    <Button x:Name="TestButton"
16            Content="テスト2"
17            Grid.Column="0"
18            Background="Red"
19            VerticalAlignment="Stretch"
20            HorizontalAlignment="Stretch">
21
22    </Button>
23</local:TestGrid1>

TestGrid1.xaml.cs

C#
1public partial class TestGrid2 : TestGrid1
2{
3    public TestGrid1()
4    {
5        this.InitializeComponent();
6    }
7}

試したこと

・継承先のグリッドと継承元のグリッドの背景色変更
背景が透明じゃないから、表示が上に載ってて見えないのかと思い
Background="Transparent"にしてみましたが、
変化はありませんでした。

補足情報（FW/ツールのバージョンなど）

・OS バージョン Windows10
・Visual Studioのxamlエディター?なら期待できそうな表示になっていたのですが
それを使用しているPage側では表示されていませんでした(アプリ実行時と同じ画面)。

追記

・ライブラリでテンプレートを作成し、アプリ側で使用した際の画面
※回答で作成していただいたコードをそのまま使用した際に表示された画面

行動規範の内容に同意します

回答1件

カスタムコントロールを作ってください。
UWP向けの記事があんまり見つからないので、WPFで調べてください ~~（試してないですが流れは同じはずです^^;~~

UWPでは「テンプレートコントロール」という用語になっているようです（コントロールテンプレートだとまた別の意味になってしまいます）

右の説明やファイル名はカスタムコントロールなのに。。。

Windows ストアアプリでページ間で共通の見た目を簡単に作りたい - かずきのBlog@hatena
ちょっと例を書いてみようと思ったのですが、↑で十分でしょうか。

C++/WinRT による XAML カスタム (テンプレート化) コントロール - UWP applications | Microsoft Docs
公式での説明はC++での例しか見つけられませんでした。

見た目や処理が同じPageが多々でてきますので、
なにかベースになるものを用意し、
そこから派生して、
オリジナルのコンポーネントを作成

には全く役に立ちませんが、テンプレートコントロールの検証です。

なんかネタが思いつかなかったので、またかずきさんのお借りしました^^;
WPF4.5入門その54 「カスタムコントロール」 - かずきのBlog@hatena

App1プロジェクト

xml:MainPage.xaml
1<Page
2  x:Class="App1.MainPage"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:classLibrary1="using:ClassLibrary1"
6  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
7
8  <StackPanel>
9    <classLibrary1:NumericUpDown
10      HorizontalAlignment="Left"
11      Background="LightBlue"
12      BorderBrush="Green"
13      BorderThickness="2"
14      FontSize="36"
15      Foreground="Red"
16      Value="100" />
17
18    <classLibrary1:NumericUpDown HorizontalAlignment="Left">
19      <classLibrary1:NumericUpDown.Template>
20        <ControlTemplate TargetType="classLibrary1:NumericUpDown">
21          <StackPanel>
22            <RepeatButton x:Name="PART_UpButton" HorizontalAlignment="Stretch">
23              <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70E;" />
24            </RepeatButton>
25            <TextBlock HorizontalAlignment="Center" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" />
26            <RepeatButton x:Name="PART_DownButton" HorizontalAlignment="Stretch">
27              <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70D;" />
28            </RepeatButton>
29          </StackPanel>
30        </ControlTemplate>
31      </classLibrary1:NumericUpDown.Template>
32    </classLibrary1:NumericUpDown>
33  </StackPanel>
34</Page>

ClassLibrary1プロジェクト

xml:Generic.xaml
1<ResourceDictionary
2  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4  xmlns:local="using:ClassLibrary1">
5  <Style TargetType="local:NumericUpDown">
6    <Setter Property="Template">
7      <Setter.Value>
8        <ControlTemplate TargetType="local:NumericUpDown">
9          <Border
10            Background="{TemplateBinding Background}"
11            BorderBrush="{TemplateBinding BorderBrush}"
12            BorderThickness="{TemplateBinding BorderThickness}">
13            <Grid>
14              <Grid.RowDefinitions>
15                <RowDefinition />
16                <RowDefinition />
17              </Grid.RowDefinitions>
18              <Grid.ColumnDefinitions>
19                <ColumnDefinition />
20                <ColumnDefinition />
21              </Grid.ColumnDefinitions>
22              <TextBlock
23                Grid.RowSpan="2"
24                VerticalAlignment="Center"
25                Foreground="{TemplateBinding Foreground}"
26                Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"
27                TextWrapping="Wrap" />
28              <RepeatButton
29                x:Name="PART_UpButton"
30                Grid.Column="1"
31                HorizontalAlignment="Stretch"
32                Content="Up" />
33              <RepeatButton
34                x:Name="PART_DownButton"
35                Grid.Row="1"
36                Grid.Column="1"
37                HorizontalAlignment="Stretch"
38                Content="Down" />
39            </Grid>
40          </Border>
41        </ControlTemplate>
42      </Setter.Value>
43    </Setter>
44  </Style>
45</ResourceDictionary>

cs:NumericUpDown.cs
1using Windows.UI.Xaml;
2using Windows.UI.Xaml.Controls;
3using Windows.UI.Xaml.Controls.Primitives;
4
5
6namespace ClassLibrary1
7{
8    public sealed class NumericUpDown : Control
9    {
10        public static readonly DependencyProperty ValueProperty
11            = DependencyProperty.Register(nameof(Value), typeof(int), typeof(NumericUpDown), new PropertyMetadata(0));
12        public int Value
13        {
14            get => (int)GetValue(ValueProperty);
15            set => SetValue(ValueProperty, value);
16        }
17
18        private RepeatButton upButton;
19        private RepeatButton downButton;
20
21        public NumericUpDown() => DefaultStyleKey = typeof(NumericUpDown);
22
23
24        private void UpClick(object sender, RoutedEventArgs e) => Value++;
25        private void DownClick(object sender, RoutedEventArgs e) => Value--;
26
27        protected override void OnApplyTemplate()
28        {
29            base.OnApplyTemplate();
30
31            if(upButton != null) upButton.Click -= UpClick;
32            if(downButton != null) downButton.Click -= DownClick;
33
34            upButton = GetTemplateChild("PART_UpButton") as RepeatButton;
35            downButton = GetTemplateChild("PART_DownButton") as RepeatButton;
36
37            if(upButton != null) upButton.Click += UpClick;
38            if(downButton != null) downButton.Click += DownClick;
39        }
40    }
41}

他は初期状態

投稿2020/09/18 13:45

編集2023/08/12 09:58

TN8001

総合スコア9317

hirotamasami

2020/09/23 07:50 編集

回答ありがとうございます。やはりStyleやテンプレートに記述してそれを引っ張ってくるしかなさそうですかね >Windows ストアアプリでページ間で共通の見た目を簡単に作りたい - かずきのBlog@hatena こちらと同じ方法で作成させていただきましたところ普通にUWPアプリとして作成した時、表示は作成したものがちゃんと表示されました。ですが、クラスライブラリ(ユニバーサル Windows)で作成したところ全く描画されませんでした。試しに完全に新規プロジェクトでプロジェクトテンプレートをクラスライブラリ(ユニバーサル Windows)を選択して、後はプロジェクト名に至るまで Windows ストアアプリでページ間で共通の見た目を簡単に作りたい - かずきのBlog@hatena で作成しているものとすべて同じものを作成いたしましたが、描画が全く反映されませんでした。こちらはクラスライブラリでテンプレートは作成できないということでしょうか？ https://araramistudio.jimdo.com/2019/09/19/c-%E3%81%AEwpf%E3%81%A7%E5%85%B1%E6%9C%89%E3%81%A7%E3%81%8D%E3%81%9D%E3%81%86%E3%81%AA%E3%82%A6%E3%82%A4%E3%83%B3%E3%83%89%E3%82%A6%E3%82%92dll%E5%8C%96%E3%81%99%E3%82%8B/ こんなのがあったんですが、 UWPでユーザーコントロールライブラリなどのそれらしいテンプレートが見つかりませんでした

TN8001

2020/09/23 08:40

> 全く描画されませんでした。コンパイルは通るけど←ボタンすら出ないという意味ですか？ > クラスライブラリでテンプレートは作成できないということでしょうか？そんなことはないです。標準のコントロールやサードパーティーのコントロールが使えないということになってしまいます。んーなんでしょう？記事内容が古くてDefaultViewModelやナビゲーションあたりは怪しいですが、何にも出ないということはなかったです（やってみました）私はUWP嫌いで^^;詳しくないのでなんともいえません。すいません。リンクの話は「できない」のではなく、「できるように（参照等を）設定するのがむずかしい（めんどくさい）」だと思います。

hirotamasami

2020/09/23 08:45

>コンパイルは通るけど←ボタンすら出ないという意味ですか？はい、そのようになりました。 >記事内容が古くてDefaultViewModelやナビゲーションあたりは怪しいですが、何にも出ないということはなかったです（やってみました）かしこまりました。もう一度一から試してみますよろしくお願いします。

hirotamasami

2020/09/24 01:57

親切に見本まで作成していただきありがとうございます。ですが、悲しいことに上記のコードそのままで ClassLibrary1プロジェクトからdllファイルを作成しそれをTestUser(App1にあたるもの)で参照いたしましたが、やはりライブラリ作成部分は描画されませんでした。 ("追記"に掲載したように直にMainPageで記述した部分のみ描画されました。) 私のDllファイルの作成方法が悪いのか、バージョンが違うのかもう少し調べてみます。よろしくお願いします。

hirotamasami

2020/09/24 05:50

いろいろ試した結果、先ほど無事参考のように描画されました。どうやらライブラリの参照ファイルが不足していたようです。失礼しました。ここからとりあえず本題のものに反映できるか挑戦してみます。

行動規範の内容に同意します