Question

我在app.xaml中定义了datatemplate 我有一个图像在我的自定义页面中，我有一个画布如何在点击图像时显示此画布？这是app.xaml中的datatemplate

<DataTemplate x:Key="FlightInfoDataTemplate">
            <Grid HorizontalAlignment="Stretch" Width="420">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
               <!-- here are controls, which are not necessary now-->
                    <Image Tag="{Binding ID}" Source="/Images/bel_icon_2.png" Width="20" Height="20" Visibility="{Binding Path=Status, Converter={StaticResource StatusToVisibilityConverter}}" />
                <!--***********-->
            </Grid>
        </DataTemplate>

这是我在MainPage.xaml中定义的画布

<Canvas x:Name="AddReminderDialog" HorizontalAlignment="Center"  Height="280" Width="260"
                VerticalAlignment="Center" Background="Transparent" Margin="110,178,110,238" Visibility="Collapsed">
            <TextBlock Foreground="Yellow" Text="Напомнить" HorizontalAlignment="Center" Canvas.Left="78" Canvas.Top="28" />
            <Button Name="btn1HourBef" BorderThickness="0" Background="Black" Content="За час" Width="260" FontSize="15" Height="60" Margin="0,70,0,0"/>
            <Button Name="btn30MinBef" BorderThickness="0" Background="Black" Content="За 30 минут" Width="260" FontSize="15" Height="60" Margin="0,130,0,0"/>
            <Button Name="btn10MinBef" BorderThickness="0" Background="Black" Content="По прилету/вылету" Width="260" FontSize="15" Height="60" Margin="0,190,0,0"/>
        </Canvas>

如何在点击图像时显示它？

Answer 1

编辑 - 画布旨在用作通知，并且最好可以在多个页面上重复使用：

根据评论，很明显画布的意图是提供通知消息。适用于可允许弹出窗口概念的东西。框架中已经有一个System.Windows.Controls.Primitives.Popup类。

实施例：在App.xaml中：

<DataTemplate x:Key="FlightInfoDataTemplate">
...
<Image Tag="{Binding ID}" Source="/Images/bel_icon_2.png" Width="20" Height="20" Visibility="{Binding Path=Status, Converter={StaticResource StatusToVisibilityConverter}}" Tap="Image_Tap"/>
...
</DataTemplate>

<ControlTemplate x:Key="AddReminderDialog">
    <Canvas HorizontalAlignment="Center"  Height="280" Width="260" VerticalAlignment="Center" Background="WhiteSmoke" Margin="110,178,110,238">
        <TextBlock Foreground="Black" Text="Hello" HorizontalAlignment="Center" Canvas.Left="78" Canvas.Top="28" />
        <Button Name="btn1HourBef" BorderThickness="0" Background="Black" Content="За час" Width="260" FontSize="15" Height="60" Margin="0,70,0,0"/>
        <Button Name="btn30MinBef" BorderThickness="0" Background="Black" Content="За 30 минут" Width="260" FontSize="15" Height="60" Margin="0,130,0,0"/>
        <Button Name="btn10MinBef" BorderThickness="0" Background="Black" Content="По прилету/вылету" Width="260" FontSize="15" Height="60" Margin="0,190,0,0"/>
    </Canvas>
</ControlTemplate>

在App.xaml.cs中：

public partial class App : Application
{
    private Popup popup = new Popup();
...

private void Image_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    var image = sender as Image;
    var modelItem = image.DataContext;

    const double width = 200;
    const double height = 100;

    var content = new ContentControl(){Width = width, Height = height, Background = new SolidColorBrush(Colors.Purple)};
    content.Template = (ControlTemplate) Resources["AddReminderDialog"];
    content.DataContext = modelItem; // you should define bindings in the ControlTemplate.

    popup.Child = content;
    popup.Height = height;
    popup.Width = width;
    popup.VerticalOffset = Application.Current.RootVisual.RenderSize.Height / 2 - height / 2;
    popup.HorizontalOffset = Application.Current.RootVisual.RenderSize.Width / 2 - width / 2;
    popup.IsOpen = true;
}

如何在图像上点击显示画布

1 个答案: