在SketchFlow中创建下拉菜单 [英] Create drop down menu in SketchFlow

问题描述

大家好，
我希望有人可以帮我在SketchFlow中创建一个简单的下拉菜单。到目前为止，我已经完成了为菜单项添加了一个按钮和一个显示子菜单项的列表框。然后我创建了一个只隐藏并显示列表框的状态，然后我为按钮设置了活动状态以使用显示列表框状态，这一切都正常，当我点击按钮时显示菜单 - 我的问题是'当我再次点击按钮时如何隐藏列表框（菜单项）？'我不确定这是否是正确的方法，但我真正想要的是一个顶部导航菜单栏  with点击菜单时我想显示和隐藏的一些菜单项。

这是我的第一天Sketchflow :)

谢谢，Rick 

解决方案

Howdy Rick，

酷，这是你第一天使用SF ...我相信你很开心！

所以，很多人都要求SF的模板不是开箱即用的。这里需要记住的是，您可以自由地使用您选择的框架的任何控件集，并简单地"草绘化"。他们......（我不认为这实际上是单词......但你知道我的意思......现在我拥有了这个词）

一个简单的例子确实存在于你的问题中。没有理由为什么你不能并且确实不会使用标准的菜单控件/ menuitem控件来创建你需要的东西，然后改变一些属性和模板以适应。

这是一个快速的样本你在追求什么。它是一个标准的Menu / MenuItem / Seperator组，其字体已更改为Buxton Sketch，并且更新了分隔符模板以使用Sketch Rectangles ...它应该完全符合您的要求。

< UserControl 
 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" 
 mc：Ignorable =" d" 
 xmlns：ps =" clr-namespace：Microsoft.Expression.Prototyping.SketchControls; assembly = Microsoft.Expression.Prototyping.SketchControls" X：名称= QUOT; Screen_1_Name" 
 x：Class =" WpfPrototype3Screens.Screen_1" 
 Width =" 640"高度= QUOT; 480"> 
 
< UserControl.Resources> 
< Style x：Key =" SketchSeparatorStyle1" TargetType =" {x：Type Separator}"> 
< Setter Property =" Template"> 
< Setter.Value> 
< ControlTemplate TargetType =" {x：Type Separator}"> 
< Grid Margin =" 0,6,0,4" SnapsToDevicePixels = QUOT;真"> 
< ps：SketchRectangleUC Style =" {StaticResource Rectangle-Sketch}"背景= QUOT;＃E0E0E0"余量= QUOT; 30,0,1,1"高度= QUOT 1 QUOT; /> 
< ps：SketchRectangleUC Style =" {StaticResource Rectangle-Sketch}"背景= QUOT;白色"余量= QUOT; 30,1,1,0"高度= QUOT 1 QUOT; /> 
 
< / Grid> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< /UserControl.Resources> 
 
< Grid x：Name =" LayoutRoot"背景= QUOT;白色"> 
< Menu Margin =" 52,57,131,0" VerticalAlignment = QUOT;陀螺"高度= QUOT 37 QUOT;> 
< MenuItem Width =" 112.433"高度= QUOT; 36.82" FontFamily =" Fonts /＃Buxton Sketch"头= QUOT;菜单项"> 
< MenuItem Header =" MenuItem" /> 
< MenuItem Header =" MenuItem" /> 
< Separator Style =" {DynamicResource SketchSeparatorStyle1}" /> 
< MenuItem Header =" MenuItem" /> 
< / MenuItem> 
< /菜单> 
< / Grid> 
< / UserControl> 

无论如何，祝你好运。 HTH

干杯

Hi All,

I'm hoping someone can help me create a simple drop-down menu in SketchFlow. What I've done so far is added a button for my menu item and a list box to display the sub-menu items. I've then created a state which simply hides and shows the list box, I then set the Active state for the button to use the show list box state, this all works fine and displays the menu when I click the button - my question is 'How do I hide the list box (menu items) when I click the button again?' I'm not sure if this is the right way to do it but all I really want is a top navigation menu bar with some menu items having a drop down which I want to show and hide when clicking on the menu.

This is my first day of sketchflow :)

Thanks, Rick 

解决方案

Howdy Rick,

Cool that it is your first day working with SF... I trust you are having fun!

So, a lot of people ask for templates for SF that are not there out of the box. The thing to remember here is that you are free to use any of the control set for the framework you have chosen, and simply "sketchify" them.. (I dont think that is actually word... but you know what I mean... and now I own the word)

A quick example is indeed in your question. There is no reason at all why you cant and indeed wouldnt use a standard menu control /menuitem control set to create what you need and then change some properties and templates to suit.

Here is a quick sample of what you are after. It is a standard Menu/MenuItem/Seperator group with the fonts changed to Buxton Sketch and the seperator template updated to use Sketch Rectangles... It should be exactly what you are after.

<UserControl
	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"
	mc:Ignorable="d"
	xmlns:ps="clr-namespace:Microsoft.Expression.Prototyping.SketchControls;assembly=Microsoft.Expression.Prototyping.SketchControls" x:Name="Screen_1_Name"
	x:Class="WpfPrototype3Screens.Screen_1"
	Width="640" Height="480">

	<UserControl.Resources>
		<Style x:Key="SketchSeparatorStyle1" TargetType="{x:Type Separator}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Separator}">
						<Grid Margin="0,6,0,4" SnapsToDevicePixels="true">
							<ps:SketchRectangleUC Style="{StaticResource Rectangle-Sketch}" Background="#E0E0E0" Margin="30,0,1,1" Height="1"/>
							<ps:SketchRectangleUC Style="{StaticResource Rectangle-Sketch}" Background="White" Margin="30,1,1,0" Height="1"/>
							
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Background="White">
		<Menu Margin="52,57,131,0" VerticalAlignment="Top" Height="37">
			<MenuItem Width="112.433" Height="36.82" FontFamily="Fonts/#Buxton Sketch" Header="MenuItem">
				<MenuItem Header="MenuItem"/>
				<MenuItem Header="MenuItem"/>
				<Separator Style="{DynamicResource SketchSeparatorStyle1}"/>
				<MenuItem Header="MenuItem"/>
			</MenuItem>
		</Menu>
	</Grid>
</UserControl>

Anyways, good luck with it all. HTH

Cheers

这篇关于在SketchFlow中创建下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！