LoginSignup
1
1

More than 3 years have passed since last update.

XAML構築時に利用したやつ簡易メモ

Posted at

:qiitan:

XAMLでWPF用のUIを構築する際のメモ
検索して探した結果などのコピペ的まとめもありまするメモ

APPのウィンドウ枠を非表示にして透明化

APPを閉じたりするバーなどを非表示にしてAPPの枠がない状態へ設定

WindowStyle : None
AllowTransparency : true

カスタムコントロールからAPPの閉じるなどのバーを自作

自作したAPPヘッダーでAPP拡大や移動など制御したい
カスタムコントロールにするとWindowがないから動かなかったので対処をメモ

public static class WindowUtil
{
  public static Window GetWindow(this DependencyObject element)
  {
    return Window.GetWindow(element);
  }
}
private void OnClose(object sender, RoutedEventArgs e)
{
  var window = ((FrameworkElement)sender).GetWindow();
  window.Close();
}

private void OnMove(object sender, MouseButtonEventArgs e)
{
  var window = ((FrameworkElement)sender).GetWindow();
  window.DragMove();
}

private void OnMaximam(object sender, RoutedEventArgs e)
{
  var window = ((FrameworkElement)sender).GetWindow();
  window.WindowState = window.WindowState != WindowState.Maximized ? WindowState.Maximized : WindowState.Normal;
}

private void OnMimimam(object sender, RoutedEventArgs e)
{
  var window = ((FrameworkElement)sender).GetWindow();
  window.WindowState = window.WindowState != WindowState.Minimized ? WindowState.Minimized : WindowState.Normal;
}

ボタンの見た目を変更

カンバスにSVGみたいな言語で図形が描画できる
このへんは便利と感じる、SVGと同じことできる感じ

<Style TargetType="Button">
  <!--Set to true to not get any properties from the themes.-->
  <Setter Property="OverridesDefaultStyle" Value="True"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid>
          <Ellipse Fill="{TemplateBinding Background}"/>
          <ContentPresenter HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

カスタムコントロールのXAMLでへ値をプロパティ譲渡

public class ClockControl: UserControl
    {
        public static readonly DependencyProperty CityProperty = DependencyProperty.Register
            (
                 "City", 
                 typeof(string), 
                 typeof(ClockControl), 
                 new PropertyMetadata(string.Empty)
            );

        public string City
        {
            get { return (string)GetValue(CityProperty); }
            set { SetValue(CityProperty, value); }
        }

        public ClockControl()
        {
            InitializeComponent();

        }
}

グリッドレイアウトでレスポンシブ

*がついているやつは伸びる感じします

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="1080*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
      <ColumnDefinition Width="240*"/>
      <ColumnDefinition Width="240*"/>
      <ColumnDefinition Width="240*"/>
  </Grid.ColumnDefinitions>
  <StackPanel Grid.Column="0"></StackPanel>
  <StackPanel Grid.Column="1"></StackPanel>
  <StackPanel Grid.Column="3"></StackPanel>
</Grid>

参考サイト

XAML でのレスポンシブ レイアウト
https://docs.microsoft.com/ja-jp/windows/uwp/design/layout/layouts-with-xaml

xamlからパラメーターをどのように渡しますか?
https://www.it-swarm.dev/ja/c%23/xaml%E3%81%8B%E3%82%89%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E3%82%92%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E6%B8%A1%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/972009094/

ControlTemplate クラス
https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.controls.controltemplate?view=netcore-3.1

How to: Draw an Ellipse or a Circle
https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/graphics-multimedia/how-to-draw-an-ellipse-or-a-circle?view=netframeworkdesktop-4.8

ウィンドウ枠のない WPF アプリを作成する
https://sakapon.wordpress.com/2015/03/01/wpf-borderless/

【WPF】包含するコンテンツからWindowを取得するには?
http://pro.art55.jp/?eid=1070343

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1