Arrange four buttons side by side

Jul 25, 2012 at 8:14 AM

I want to arrange four buttons side by side.

I've already tried this:

 

<Fluent:RibbonGroupBox Header="Some Header">
	<Fluent:RibbonGroupBox>
		<Fluent:Button Icon="/WpfApplication1;component/Resources/First_16.png" Size="Small" />
		<Fluent:Button Icon="/WpfApplication1;component/Resources/Previous_16.png" Size="Small" />
		<Fluent:Button Icon="/WpfApplication1;component/Resources/Next_16.png" Size="Small" />
		<Fluent:Button Icon="/WpfApplication1;component/Resources/Last_16.png" Size="Small" />
	</Fluent:RibbonGroupBox>
</Fluent:RibbonGroupBox>

 

but I only get this (unwanted) result:

How can I solve the problem?

Jul 25, 2012 at 9:27 AM
Edited Jul 25, 2012 at 10:36 AM

I find this solution:

 

<Fluent:RibbonGroupBox Header="Some Header">
	<Fluent:RibbonToolBar>
		<Fluent:RibbonToolBar.LayoutDefinitions>
			<Fluent:RibbonToolBarLayoutDefinition Size="Small">
				<Fluent:RibbonToolBarRow>
					<Fluent:RibbonToolBarControlGroupDefinition>
						<Fluent:RibbonToolBarControlDefinition Target="buttonFirst" />
						<Fluent:RibbonToolBarControlDefinition Target="buttonPrevious" />
						<Fluent:RibbonToolBarControlDefinition Target="buttonNext" />
						<Fluent:RibbonToolBarControlDefinition Target="buttonLast" />
					</Fluent:RibbonToolBarControlGroupDefinition>
				</Fluent:RibbonToolBarRow>
			</Fluent:RibbonToolBarLayoutDefinition>
		</Fluent:RibbonToolBar.LayoutDefinitions>
		<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/First_16.png" x:Name="buttonFirst" />
		<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/Previous_16.png" x:Name="buttonPrevious" />
		<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/Next_16.png" x:Name="buttonNext" />
		<Fluent:Button Size="Small" Icon="/WpfApplication1;component/Resources/Last_16.png" x:Name="buttonLast" />
	</Fluent:RibbonToolBar>
</Fluent:RibbonGroupBox>

But the images are not displayed ... = (

 

(The Images resource type is set to `Resource`)

Jul 25, 2012 at 1:54 PM
Simply place the buttons inside a Stack Panel like so:
<Fluent:RibbonGroupBox Header="Some Header">
	<Fluent:RibbonGroupBox>
<StackPanel Orientation="Horizontal">
<Fluent:Button Icon="/WpfApplication1;component/Resources/First_16.png" Size="Small" />
<Fluent:Button Icon="/WpfApplication1;component/Resources/Previous_16.png" Size="Small" />
<Fluent:Button Icon="/WpfApplication1;component/Resources/Next_16.png" Size="Small" />
<Fluent:Button Icon="/WpfApplication1;component/Resources/Last_16.png" Size="Small" />
</StackPanel>
</Fluent:RibbonGroupBox>
</Fluent:RibbonGroupBox>


dredav wrote:

I want to arrange four buttons side by side.

I've already tried this:

 

<Fluent:RibbonGroupBox Header="Some Header">
	<Fluent:RibbonGroupBox>
		<Fluent:Button Icon="/WpfApplication1;component/Resources/First_16.png" Size="Small" />
		<Fluent:Button Icon="/WpfApplication1;component/Resources/Previous_16.png" Size="Small" />
		<Fluent:Button Icon="/WpfApplication1;component/Resources/Next_16.png" Size="Small" />
		<Fluent:Button Icon="/WpfApplication1;component/Resources/Last_16.png" Size="Small" />
	</Fluent:RibbonGroupBox>
</Fluent:RibbonGroupBox>

 

but I only get this (unwanted) result:

How can I solve the problem?

 

Jul 25, 2012 at 2:06 PM

@AdamDavis Thank you, it goes;)

 

But why are no images displayed in the toolbar (my second post)?