WPF。如何使分隔符拉伸到菜单宽度?

时间:2019-06-11 15:16:57

标签: c# wpf xaml menu

这可能是一个愚蠢的问题...但是我找不到能够回答该问题的其他问题,也找不到能帮助我实现自己想要的职位的帖子。

我有以下XAML:

<Menu>
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <MenuItem Header="Item1" />
    <Separator VerticalContentAlignment="Stretch" VerticalAlignment="Stretch"
               HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" />
    <MenuItem Header="Item2" />
</Menu>

在我的实际业务案例中,标题更为复杂,其中包含图像和其他一些东西。

问题是上述xaml产生了以下输出:

enter image description here

如您所见,分隔符没有伸展。这似乎是一件非常简单的任务……但我还没有找到解决方案。

我试图将样式设置为ItemContainerStyle,在其中我给HorizontalContentAlignment赋予值Stretch,但没有用。

2 个答案:

答案 0 :(得分:2)

默认模板包含边距。您可以通过定义自己的自定义模板将其删除:

<Separator>
    <Separator.Template>
        <ControlTemplate TargetType="{x:Type Separator}">
            <Border Background="{TemplateBinding Control.Background}"
                    BorderBrush="{TemplateBinding Control.BorderBrush}"
                    BorderThickness="{TemplateBinding Control.BorderThickness}" Margin="0"/>
        </ControlTemplate>
    </Separator.Template>
</Separator>

在Windows 8和更高版本上,默认值看起来像这样,即Border元素的硬编码左边距为30 DIP:

<ControlTemplate TargetType="{x:Type Separator}">
    <Border Background="{TemplateBinding Control.Background}"
            BorderBrush="{TemplateBinding Control.BorderBrush}"
            BorderThickness="{TemplateBinding Control.BorderThickness}" Margin="30,0,0,0"/>
</ControlTemplate>

如果您的Menu包含多个分隔符,则可以使用隐式Style

<Menu>
    <Menu.Resources>
        <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Separator}">
                        <Border Background="{TemplateBinding Control.Background}"
                                BorderBrush="{TemplateBinding Control.BorderBrush}"
                                BorderThickness="{TemplateBinding Control.BorderThickness}" 
                                Margin="0"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Menu.Resources>
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <MenuItem Header="Item1" />
    <Separator />
    <MenuItem Header="Item2" />
    <Separator />
</Menu>

答案 1 :(得分:1)

我只是使用网格而不是堆栈面板来实现的。我希望这对您有用!

        try { 
            let queryResult
            let trxResult

            trxResult = await dbConn.transaction(async (trx) => {

                queryResult = await trx(tbl).select('*')
                    .whereNull('published').orWhere('published', '<', '2100000000')

                // Somehow use a .whereIn() here?
                for (let i: number = 0; i < queryResult.length; i++) {
                    await trx.into(tbl).where('_id', queryResult[i]._id).update({ published: Math.round(new Date().valueOf() / 1000) })
                }

            });

            console.log("transaction was committed");
            return ( queryResult )
        } 

        catch (e) {
            console.log(`transaction was rolled back\n${e}`);
        }

    }