使用堆栈面板内的按钮导航到页面的框架

Posted

技术标签:

【中文标题】使用堆栈面板内的按钮导航到页面的框架【英文标题】:a frame that navigates to a page with a button inside a stackpanel 【发布时间】:2021-08-27 09:18:03 【问题描述】:

我在一个样式不正确的 WPF 表单按钮中有一个按钮(使用 MaterialDesign 主题),我哪里出错了? DataGrid 中的按钮很好。我尝试在 mainWindow 上的 Window 附近做 Foreground="white" 但是当我关闭主题时,一切都恢复正常WPF form with the text colour (lower right) missing

app.xamp:

   <Application x:Class="App"   
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:P2Assessment"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             StartupUri="mainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Purple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />

            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

带框架的主窗口:

    <Window x:Name="frmMain" x:Class="mainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="DynamicResource MaterialDesignBody"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal" 
        TextOptions.TextRenderingMode="Auto"        
        Foreground="White"
        Background="DynamicResource MaterialDesignPaper"
        FontFamily="DynamicResource MaterialDesignFont"
        xmlns:local="clr-namespace:P2Assessment"
        mc:Ignorable="d"
        Title="XYZ &amp; Co." Height="460" Width="800">
    <Grid>

    <materialDesign:Card  Margin="16">
        <Frame x:Name="frame"  Margin="10,15,10,5">
            <!-- navigate to different views-->
        </Frame>
    </materialDesign:Card>
</Grid>

框架导航页面:

<Page x:Class="P2Assessment.ViewOrders"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  Foreground="Wheat"
  mc:Ignorable="d" 
  d:DesignHeight="450" d:DesignWidth="800"
  Title="ViewOrders">

<Grid>
    <StackPanel>
        <Label Content="View orders" FontSize="28" FontWeight="Bold" HorizontalAlignment="Center"/>
        <DataGrid x:Name="dgOrders" AutoGenerateColumns="False" Height="260">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Id" Binding="Binding Id" Width="15"/>
                <DataGridTextColumn Header="Date / Time" Binding="Binding dateTime"  Width="200"/>
                <DataGridTextColumn Header="# Items" Binding="Binding Items"  Width="200"/>
                <DataGridTextColumn Header="Total" Binding="Binding Total"  Width="75"/>
                <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                            <Button Content="View order details" Click="ViewOrderDetails"/>
                    </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,15,0,0" >
            <Button Content="Add an order" Margin="0,0,15,0" Padding="15" Click="AddOrderClicked" Style="StaticResource MaterialDesignRaisedAccentButton" Width="100"/>
            <Button Content="Close" Margin="0,0,15,0" Padding="15" Click="Button_Click"/>
        </StackPanel>
    </StackPanel>
    
</Grid>

感谢您的帮助

【问题讨论】:

【参考方案1】:

是因为Padding="15"一定是把内容推到了按钮区域之外

【讨论】:

以上是关于使用堆栈面板内的按钮导航到页面的框架的主要内容,如果未能解决你的问题,请参考以下文章

如何使堆栈面板内的按钮展开以占用整个空间?

DataGrid-RowDetailsTemplate 内的堆栈面板中的变量无法识别

axure界面功能

如何从子框架导航父框架

React Native:从导航堆栈中删除后退按钮?

WPF - 如何在标签导航中跳过标签?