Simple memo of the guy used when building XAML

1 minute read

:qiitan:

Notes on building a UI for WPF in XAML
There is also a copy-and-paste summary of the results of searching and searching.

Hide the window frame of the APP and make it transparent

Hide the bar that closes the APP and set it so that there is no APP frame

WindowStyle ： None
AllowTransparency ： true

Create your own bar such as close APP from custom control

I want to control APP expansion and movement with my own APP header
When I made it a custom control, it did not work because there was no Window, so make a note of the countermeasure

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;
}

Change the appearance of the button

You can draw shapes on the canvas in a language like SVG
This is convenient, it feels like you can do the same as 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>

Transfer properties to custom control 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();

        }
}

Responsive with grid layout

Those with * feel like they are growing

<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>

Reference site

Responsive layout in XAML
https://docs.microsoft.com/ja-jp/windows/uwp/design/layout/layouts-with-xaml

How do you pass parameters from 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 class
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

Create a WPF app without a window border
https://sakapon.wordpress.com/2015/03/01/wpf-borderless/

[WPF] How to get Window from the included content?
http://pro.art55.jp/?eid=1070343

You May Also Enjoy