avaloniaui - Avalonia 如何创建自定义弹出窗口

Question

先做一点解释：

这是Popup 元素的源代码

这是使用 Popup DatePicker的示例，它是 xaml

我试过在这样的空窗口上使用这个例子

这是结果：

所以我想创建一个 OK/Cancel 选择面板并使用 DateTimePicker Pop 并选择你想要什么并接受或中止选择。

我怎样才能创建一个像这样的简单自定义选择器。

Answer 1

编辑：这是我的DateTimePicker和截图

点击后

好的，我分析了几个小时的现有代码。简单的答案是：

第 1 步：创建一个演示者类来管理您的控件和弹出事件。（如DatePickerPresenter

namespace AvaloniaTest.Views {
  public class SabriPresenter : PickerPresenterBase
  {
  ...

  }
}

第 2 步：在您的窗口或资源中为此演示者创建模板。

<Window xmlns="bla bla bla"
        xmlns:v="using:AvaloniaTest.Views"
        Title="AvaloniaTest">

  <Design.DataContext>
    <vm:MainWindowViewModel/>
  </Design.DataContext>

  <Window.Styles>
    <Style Selector="v|SabriPresenter" >
      <Setter Property="Template">
        <ControlTemplate>
          <Grid Background="AliceBlue">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="100"/>
              <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="100"/>
              <RowDefinition Height="20"/>
            </Grid.RowDefinitions>
            <Panel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
              <TextBlock Text="Your content..."/>
            </Panel>
            <Button Grid.Column="0" Grid.Row="0" Content="OK"/>
            <Button Grid.Column="1" Grid.Row="0" Content="Cancel"/>
          </Grid>
        </ControlTemplate>
      </Setter>
    </Style>
  </Window.Styles>
</Window>

第 3 步：随时随地使用此演示者

<Window xmlns="bla bla"
        xmlns:v="using:AvaloniaTest.Views"
        >
  <StackPanel Orientation="Vertical" VerticalAlignment="Center">
    <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Button Content="Popeye"  Name="sabri"/>
    <Popup Name="Popup"
           WindowManagerAddShadowHint="False"
           StaysOpen="False"
           PlacementMode="Bottom"
           PlacementTarget="{Binding ElementName=sabri}"
           >
      <v:SabriPresenter />
    </Popup>
  </StackPanel>
</Window>

达达！