回答編集履歴

見直しキャンペーン中

2023/08/12 09:58

投稿

TN8001

スコア9898

test CHANGED Viewed

@@ -1,9 +1,9 @@
 カスタムコントロールを作ってください。
-`UWP`向けの記事があんまり見つからないので、`WPF`で調べてください（試してないですが流れは同じはずです^^;
+UWP向けの記事があんまり見つからないので、WPFで調べてください ~~（試してないですが流れは同じはずです^^;~~
 ---
-`UWP`では「**テンプレート コントロール**」という用語になっているようです（コントロールテンプレートだとまた別の意味になってしまいます）
+UWPでは「**テンプレート コントロール**」という用語になっているようです（コントロールテンプレートだとまた別の意味になってしまいます）
 ![イメージ説明](743ed00f415c708a8725ff44892a6aa7.png)
 右の説明やファイル名はカスタムコントロールなのに。。。
@@ -26,7 +26,7 @@
 [WPF4.5入門 その54 「カスタムコントロール」 - かずきのBlog@hatena](https://blog.okazuki.jp/entry/2014/09/08/221209)
-### App1プロジェクト
+##### App1プロジェクト
 ```xml:MainPage.xaml
 <Page
   x:Class="App1.MainPage"
@@ -64,7 +64,7 @@
 </Page>
 ```
-### ClassLibrary1プロジェクト
+##### ClassLibrary1プロジェクト
 ```xml:Generic.xaml
 <ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
@@ -157,4 +157,5 @@
 }
 ```
 他は初期状態
 ![イメージ説明](254e5b26f7a426dba70b2d4d29e9ab1b.png)

見直しキャンペーン中

2023/07/23 06:25

投稿

TN8001

スコア9898

test CHANGED Viewed

@@ -1,321 +1,160 @@
 カスタムコントロールを作ってください。
 `UWP`向けの記事があんまり見つからないので、`WPF`で調べてください（試してないですが流れは同じはずです^^;
 ---
 `UWP`では「**テンプレート コントロール**」という用語になっているようです（コントロールテンプレートだとまた別の意味になってしまいます）
 ![イメージ説明](743ed00f415c708a8725ff44892a6aa7.png)
 右の説明やファイル名はカスタムコントロールなのに。。。
 [Windows ストア アプリでページ間で共通の見た目を簡単に作りたい - かずきのBlog@hatena](https://blog.okazuki.jp/entry/2014/01/09/003357)
 ちょっと例を書いてみようと思ったのですが、↑で十分でしょうか。
 [C++/WinRT による XAML カスタム (テンプレート化) コントロール - UWP applications | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/uwp/cpp-and-winrt-apis/xaml-cust-ctrl)
 公式での説明はC++での例しか見つけられませんでした。
 ---
 > 見た目や処理が同じPageが多々でてきますので、
 > なにかベースになるものを用意し、
 > そこから派生して、
 > オリジナルのコンポーネントを作成
 には全く役に立ちませんが、テンプレート コントロールの検証です。
 なんかネタが思いつかなかったので、またかずきさんのお借りしました^^;
 [WPF4.5入門 その54 「カスタムコントロール」 - かずきのBlog@hatena](https://blog.okazuki.jp/entry/2014/09/08/221209)
+### App1プロジェクト
-App1プロジェクト MainPage.xaml
+```xml:MainPage.xaml
-```xaml
 <Page
   x:Class="App1.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:classLibrary1="using:ClassLibrary1"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <StackPanel>
     <classLibrary1:NumericUpDown
       HorizontalAlignment="Left"
       Background="LightBlue"
       BorderBrush="Green"
       BorderThickness="2"
       FontSize="36"
       Foreground="Red"
       Value="100" />
     <classLibrary1:NumericUpDown HorizontalAlignment="Left">
       <classLibrary1:NumericUpDown.Template>
         <ControlTemplate TargetType="classLibrary1:NumericUpDown">
           <StackPanel>
             <RepeatButton x:Name="PART_UpButton" HorizontalAlignment="Stretch">
               <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70E;" />
             </RepeatButton>
             <TextBlock HorizontalAlignment="Center" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" />
             <RepeatButton x:Name="PART_DownButton" HorizontalAlignment="Stretch">
               <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70D;" />
             </RepeatButton>
           </StackPanel>
         </ControlTemplate>
       </classLibrary1:NumericUpDown.Template>
     </classLibrary1:NumericUpDown>
   </StackPanel>
 </Page>
 ```
-ClassLibrary1プロジェクト Generic.xaml
+### ClassLibrary1プロジェクト
-```xaml
+```xml:Generic.xaml
 <ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:ClassLibrary1">
   <Style TargetType="local:NumericUpDown">
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="local:NumericUpDown">
           <Border
             Background="{TemplateBinding Background}"
             BorderBrush="{TemplateBinding BorderBrush}"
             BorderThickness="{TemplateBinding BorderThickness}">
             <Grid>
               <Grid.RowDefinitions>
                 <RowDefinition />
                 <RowDefinition />
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                 <ColumnDefinition />
                 <ColumnDefinition />
               </Grid.ColumnDefinitions>
               <TextBlock
                 Grid.RowSpan="2"
                 VerticalAlignment="Center"
                 Foreground="{TemplateBinding Foreground}"
                 Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"
                 TextWrapping="Wrap" />
               <RepeatButton
                 x:Name="PART_UpButton"
                 Grid.Column="1"
                 HorizontalAlignment="Stretch"
                 Content="Up" />
               <RepeatButton
                 x:Name="PART_DownButton"
                 Grid.Row="1"
                 Grid.Column="1"
                 HorizontalAlignment="Stretch"
                 Content="Down" />
             </Grid>
           </Border>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
   </Style>
 </ResourceDictionary>
 ```
-ClassLibrary1プロジェクト NumericUpDown.cs
+```cs:NumericUpDown.cs
-```C#
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Controls.Primitives;
 namespace ClassLibrary1
 {
     public sealed class NumericUpDown : Control
     {
         public static readonly DependencyProperty ValueProperty
             = DependencyProperty.Register(nameof(Value), typeof(int), typeof(NumericUpDown), new PropertyMetadata(0));
         public int Value
         {
             get => (int)GetValue(ValueProperty);
             set => SetValue(ValueProperty, value);
         }
         private RepeatButton upButton;
         private RepeatButton downButton;
         public NumericUpDown() => DefaultStyleKey = typeof(NumericUpDown);
         private void UpClick(object sender, RoutedEventArgs e) => Value++;
         private void DownClick(object sender, RoutedEventArgs e) => Value--;
         protected override void OnApplyTemplate()
         {
             base.OnApplyTemplate();
             if(upButton != null) upButton.Click -= UpClick;
             if(downButton != null) downButton.Click -= DownClick;
             upButton = GetTemplateChild("PART_UpButton") as RepeatButton;
             downButton = GetTemplateChild("PART_DownButton") as RepeatButton;
             if(upButton != null) upButton.Click += UpClick;
             if(downButton != null) downButton.Click += DownClick;
         }
     }
 }
 ```
 他は初期状態
 ![イメージ説明](254e5b26f7a426dba70b2d4d29e9ab1b.png)

検証追記

2020/09/23 10:00

投稿

TN8001

スコア9898

test CHANGED Viewed

@@ -25,3 +25,297 @@
 [C++/WinRT による XAML カスタム (テンプレート化) コントロール - UWP applications | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/uwp/cpp-and-winrt-apis/xaml-cust-ctrl)
 公式での説明はC++での例しか見つけられませんでした。
+---
+> 見た目や処理が同じPageが多々でてきますので、
+> なにかベースになるものを用意し、
+> そこから派生して、
+> オリジナルのコンポーネントを作成
+には全く役に立ちませんが、テンプレート コントロールの検証です。
+なんかネタが思いつかなかったので、またかずきさんのお借りしました^^;
+[WPF4.5入門 その54 「カスタムコントロール」 - かずきのBlog@hatena](https://blog.okazuki.jp/entry/2014/09/08/221209)
+App1プロジェクト MainPage.xaml
+```xaml
+<Page
+  x:Class="App1.MainPage"
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:classLibrary1="using:ClassLibrary1"
+  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+  <StackPanel>
+    <classLibrary1:NumericUpDown
+      HorizontalAlignment="Left"
+      Background="LightBlue"
+      BorderBrush="Green"
+      BorderThickness="2"
+      FontSize="36"
+      Foreground="Red"
+      Value="100" />
+    <classLibrary1:NumericUpDown HorizontalAlignment="Left">
+      <classLibrary1:NumericUpDown.Template>
+        <ControlTemplate TargetType="classLibrary1:NumericUpDown">
+          <StackPanel>
+            <RepeatButton x:Name="PART_UpButton" HorizontalAlignment="Stretch">
+              <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70E;" />
+            </RepeatButton>
+            <TextBlock HorizontalAlignment="Center" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" />
+            <RepeatButton x:Name="PART_DownButton" HorizontalAlignment="Stretch">
+              <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE70D;" />
+            </RepeatButton>
+          </StackPanel>
+        </ControlTemplate>
+      </classLibrary1:NumericUpDown.Template>
+    </classLibrary1:NumericUpDown>
+  </StackPanel>
+</Page>
+```
+ClassLibrary1プロジェクト Generic.xaml
+```xaml
+<ResourceDictionary
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:local="using:ClassLibrary1">
+  <Style TargetType="local:NumericUpDown">
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate TargetType="local:NumericUpDown">
+          <Border
+            Background="{TemplateBinding Background}"
+            BorderBrush="{TemplateBinding BorderBrush}"
+            BorderThickness="{TemplateBinding BorderThickness}">
+            <Grid>
+              <Grid.RowDefinitions>
+                <RowDefinition />
+                <RowDefinition />
+              </Grid.RowDefinitions>
+              <Grid.ColumnDefinitions>
+                <ColumnDefinition />
+                <ColumnDefinition />
+              </Grid.ColumnDefinitions>
+              <TextBlock
+                Grid.RowSpan="2"
+                VerticalAlignment="Center"
+                Foreground="{TemplateBinding Foreground}"
+                Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"
+                TextWrapping="Wrap" />
+              <RepeatButton
+                x:Name="PART_UpButton"
+                Grid.Column="1"
+                HorizontalAlignment="Stretch"
+                Content="Up" />
+              <RepeatButton
+                x:Name="PART_DownButton"
+                Grid.Row="1"
+                Grid.Column="1"
+                HorizontalAlignment="Stretch"
+                Content="Down" />
+            </Grid>
+          </Border>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </Style>
+</ResourceDictionary>
+```
+ClassLibrary1プロジェクト NumericUpDown.cs
+```C#
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+namespace ClassLibrary1
+{
+    public sealed class NumericUpDown : Control
+    {
+        public static readonly DependencyProperty ValueProperty
+            = DependencyProperty.Register(nameof(Value), typeof(int), typeof(NumericUpDown), new PropertyMetadata(0));
+        public int Value
+        {
+            get => (int)GetValue(ValueProperty);
+            set => SetValue(ValueProperty, value);
+        }
+        private RepeatButton upButton;
+        private RepeatButton downButton;
+        public NumericUpDown() => DefaultStyleKey = typeof(NumericUpDown);
+        private void UpClick(object sender, RoutedEventArgs e) => Value++;
+        private void DownClick(object sender, RoutedEventArgs e) => Value--;
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+            if(upButton != null) upButton.Click -= UpClick;
+            if(downButton != null) downButton.Click -= DownClick;
+            upButton = GetTemplateChild("PART_UpButton") as RepeatButton;
+            downButton = GetTemplateChild("PART_DownButton") as RepeatButton;
+            if(upButton != null) upButton.Click += UpClick;
+            if(downButton != null) downButton.Click += DownClick;
+        }
+    }
+}
+```
+他は初期状態
+![イメージ説明](254e5b26f7a426dba70b2d4d29e9ab1b.png)

用語追記

2020/09/23 09:59

投稿

TN8001

スコア9898

test CHANGED Viewed

@@ -1,3 +1,27 @@
 カスタムコントロールを作ってください。
 `UWP`向けの記事があんまり見つからないので、`WPF`で調べてください（試してないですが流れは同じはずです^^;
+---
+`UWP`では「**テンプレート コントロール**」という用語になっているようです（コントロールテンプレートだとまた別の意味になってしまいます）
+![イメージ説明](743ed00f415c708a8725ff44892a6aa7.png)
+右の説明やファイル名はカスタムコントロールなのに。。。
+[Windows ストア アプリでページ間で共通の見た目を簡単に作りたい - かずきのBlog@hatena](https://blog.okazuki.jp/entry/2014/01/09/003357)
+ちょっと例を書いてみようと思ったのですが、↑で十分でしょうか。
+[C++/WinRT による XAML カスタム (テンプレート化) コントロール - UWP applications | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/uwp/cpp-and-winrt-apis/xaml-cust-ctrl)
+公式での説明はC++での例しか見つけられませんでした。