Intersoft Community - ClientUI - UXDock with horizontal scrolling?

UXDock with horizontal scrolling?

jimmyps — Sat, 13 Nov 2010 04:10:07 GMT

Chris,

Thanks for explaining your requirements.

I completely understood the type of applications that you're building. We did put in some apps prototype while designing the controls to ensure we covered most scenarios.

Technically, the stack button is already a hierarchical-friendly control, which means you can insert any number of nested buttons. However, we didn't manage to put in the visual/presentation implementation for the Grid stack mode in the release as we've throw-in too much features.

The good news is that you can use the Menu mode for your stack button. That will allow you to show nested items for your requirement above. To learn more about the stack mode and how to configure it, see StackMode Property.

Let me know if that works for you.

Thanks,
Jimmy

UXDock with horizontal scrolling?

chrisaswain — Fri, 12 Nov 2010 09:18:07 GMT

Jimmy,

Thanks for the guidance. Here is a little more info about what I need to do...

Background: I'm developing a modular Silverlight platform that will accomodate 1-to-N applications. I wanted to use the UXDock like a task bar or app bar of sorts. The plan was to show the available apps in the bar, and use the UXStackItems to keep track of app instances.

I suppose (based on your guidance) I could use it like my Windows 7 task bar and allow the users to add commonly used apps to it while by default providing a "Sart Menu" UXDockButton that would contain all of the apps. Then, as users run apps, I could add them to the bar if they are not already "pinned".

This approach will work to a point. But as soon as a power user opens 50 different apps all at once, then the bar will need to scroll, or I'll need to calculate it's limit and begin grouping UXButtons as stack items in some sort of overflow UXButton. If the overflow button is needed, would it be possible to show the overflow running apps as stack buttons and somehow still be able to show each apps' individual app instances? For example, can a stack button contain another list of stack buttons?

UXDock with horizontal scrolling?

jimmyps — Thu, 11 Nov 2010 23:21:10 GMT

Hello Chris,

Thank you for evaluating ClientUI.

Adding to Glenn's reply, I would like to mention our initial concept that drives the control engineering and design in overall. The UXDock control was designed to deliver a kind of user experience where users can conveniently access to the most frequently used applications. So you may want to limit the buttons to only the major functions in your application.

Having the scrolling mechanism would be somewhat inconsistent and not ideal with such user experience (with all the stunning zooming animation etc), which was one of the reasons why we discarded the implementation. The best design pattern is to keep the main buttons minimum to the core functions, and show more applications in the stack button. You can have as many of stack buttons as you need, i.e, one for applications, one for recent documents, and so on. The bottomline is to avoid cluttered design and improves usability.

Let me know if you have any questions or feedback.

Hope this helps,
Jimmy

UXDock with horizontal scrolling?

Glayaar — Wed, 10 Nov 2010 23:40:28 GMT

Unfortunately, UXDock has not implement scrolling feature yet. Based on my discussion with the developer, the closest workaround which will maintain UXDock behavior would be to implement paging feature.

You could achieve this by editing the default UXDock template so ItemsPresenter will have a perdefined width, you also need to add elements to move the page forward or backward. Here is the snippet of a modified portion of the default UXDock template:

<Setter Property="Template">
	<Setter.Value>
		<ControlTemplate TargetType="Intersoft:UXDock">
			<Grid>
				<Grid x:Name="RootElement">
					<Intersoft:ContentTransformer x:Name="ContentTransformer" IsHitTestVisible="False">
						<StackPanel x:Name="BackgroundLayoutElement" HorizontalAlignment="Center" Orientation="Horizontal" VerticalAlignment="Bottom">
							<Grid x:Name="BackgroundContainerLeftElement">
								<Image x:Name="BackgroundImageLeftElement" Visibility="Collapsed"/>
							</Grid>
							<Grid x:Name="BackgroundContainerElement">
								<Grid x:Name="BackgroundTemplateElement"/>
								<Border x:Name="BackgroundElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/>
								<Image x:Name="BackgroundImageCenterElement" Visibility="Collapsed"/>
							</Grid>
							<Grid x:Name="BackgroundContainerRightElement">
								<Image x:Name="BackgroundImageRightElement" Visibility="Collapsed"/>
							</Grid>
						</StackPanel>
					</Intersoft:ContentTransformer>
					<StackPanel x:Name="LayoutElement" Orientation="Horizontal"/>
					<StackPanel x:Name="StructureElement" HorizontalAlignment="Center" Orientation="Horizontal" VerticalAlignment="Center">
						<StackPanel x:Name="StructureLeft" IsHitTestVisible="False" Orientation="Horizontal"/>
						<Intersoft:UXButton Height="65" Width="10" Content="Less"/>
						<Grid Width="400">
							<ItemsPresenter x:Name="ItemsPresenter"/>
						</Grid>
						<Intersoft:UXButton Height="65" Width="10" Content="More"/>
						<StackPanel x:Name="StructureRight" IsHitTestVisible="False" Orientation="Horizontal"/>
					</StackPanel>
				</Grid>
			</Grid>
		</ControlTemplate>
	</Setter.Value>
</Setter>

You also need to implement the logic to add the new item when moving forward or backward.

UXDock with horizontal scrolling?

chrisaswain — Wed, 10 Nov 2010 10:12:29 GMT

I'm in the process of evaluating the UXDock control, and I love what I see. However, my project has a requirement that the UXDock bar be able to accomodate a large number of UXDockButtons. As it stands, the control simply cuts off some of the controls on either end if the UXDock control size exceeds the size of the Silverlight app it is in.

Is there a way to make the UXDock control scroll the UXDock buttons in the event that there are too many to fix on the screen? Specifically, it would be nice to have hidden arrow buttons on the left and right that would facilitate scrolling on the MouseEnter event.

See the attached PNG for a rough example.