Sizing a grid inside Backstage to backstage open height and width

Ribbon for WPF Forum

Posted 7 years ago by Adam Davis
Version: 11.2.0553
Avatar

I'm trying to implement a container inside a backstage tab window. My problem is I want the container to fill the height and width of the backstage window. My container contains a scrollviewer and then another control. I've tried binding the height of the container to the height of the backstage window but it get the non displayed height property and therefore doesn't fill the displayed opened backstage window.

Does anyone have any suggestions? 

Below is some code I have in the Backstage tab:

<!-- Backstage Print Tab -->
<ribbon:BackstageTab Header="Print" KeyTipAccessText="P" >
	<DockPanel LastChildFill="True"> 
		<Border DockPanel.Dock="Left" Background="White" HorizontalAlignment="Stretch" Grid.Row="0" Height="Auto" Width="Auto" >
			<StackPanel Orientation="Vertical" >
				<StackPanel Margin="0,5,0,5" Orientation="Horizontal">
					<Button Margin="25,15,0,15" Style="{StaticResource BackStageButtonStyle1}" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="buttonPrint" Height="80" Width="80">
						<StackPanel Orientation="Vertical">
							<Image Source="Images\printer32.png" Height="32" Width="32" />
							<TextBlock HorizontalAlignment="Center" Text="Print" />
						</StackPanel>
					</Button>
					<StackPanel Orientation="Vertical">
						<shared:PixelSnapper>
							<TextBlock Margin="15,15,0,0" Text="Print" FontSize="13" TextTrimming="CharacterEllipsis" FontWeight="Bold" Foreground="#5E5E5E" />
						</shared:PixelSnapper>
						<Rectangle Height="2" Margin="15,1,10,0" Stroke="{StaticResource DottedHorizontalSeparatorBrush}" StrokeThickness="1" StrokeDashArray="2 2" RenderOptions.EdgeMode="Aliased" Width="115" />
						<StackPanel Margin="15,5,0,0" Orientation="Horizontal" HorizontalAlignment="Stretch">
							<TextBlock FontSize="12" Text="Copies:" FontStretch="Normal" TextAlignment="Center" FontFamily="Segoe UI" />
							<editors:Int32EditBox  Margin="10,0,0,0"  FontSize="13" Format="N0" SpinnerVisibility="Visible" StepValue="1" Minimum="0" Maximum="32767" InitialValue="1" Value="1" Width="65" IsEnabled="True" Background="{x:Null}" FontStretch="Normal" />
						</StackPanel>
					</StackPanel>
				</StackPanel>
				<ScrollViewer VerticalScrollBarVisibility="Disabled">
					<Border Background="White" DataContext="{Binding Source={StaticResource PrinterListData}}">
						<Border.ToolTip>
							<ToolTip Width="210">
								<StackPanel Orientation="Vertical">
									<TextBlock FontWeight="SemiBold">
										<Run Text="Printer Status"/>
									</TextBlock>
									<TextBlock />
									<StackPanel Orientation="Horizontal">
										<TextBlock Margin="5,0,0,0" Text="Status: " />
										<TextBlock Text="{Binding CurrentPrinterStatus}" />
									</StackPanel>
									<StackPanel Orientation="Horizontal">
										<TextBlock Margin="5,0,0,0" Text="Type: " />
										<TextBlock Text="{Binding CurrentPrinterName}" />
									</StackPanel>
									<StackPanel Orientation="Horizontal">
										<TextBlock Margin="5,0,0,0" Text="Where: " />
										<TextBlock Text="{Binding CurrentPrinterPort}" />
									</StackPanel>
										<TextBlock Margin="5,0,0,0" Text="Comment: " />
										<TextBlock />
								</StackPanel>
							</ToolTip>
						</Border.ToolTip>
						<StackPanel Orientation="Vertical">
							<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
								<shared:PixelSnapper>
									<TextBlock Margin="25,0,0,0" Text="Printer" FontSize="13" TextTrimming="CharacterEllipsis" FontWeight="Bold" Foreground="#5E5E5E" />
								</shared:PixelSnapper>
								<Image x:Name="PrinterStatus" HorizontalAlignment="Right" Source="Images\info11.png" Width="11" Height="11" Margin="155,0,0,0" DataContext="{Binding Source={StaticResource PrinterListData}}" >
									<Image.ToolTip>
										<ToolTip Width="210">
											<StackPanel Orientation="Vertical">
												<TextBlock FontWeight="SemiBold">
													<Run Text="Printer Status"/>
												</TextBlock>
												<TextBlock />
												<StackPanel Orientation="Horizontal">
													<TextBlock Margin="5,0,0,0" Text="Status: " />
													<TextBlock Text="{Binding CurrentPrinterStatus}" />
												</StackPanel>
												<StackPanel Orientation="Horizontal">
													<TextBlock Margin="5,0,0,0" Text="Type: " />
													<TextBlock Text="{Binding CurrentPrinterName}" />
												</StackPanel>
												<StackPanel Orientation="Horizontal">
													<TextBlock Margin="5,0,0,0" Text="Where: " />
													<TextBlock Text="{Binding CurrentPrinterPort}" />
												</StackPanel>
												<TextBlock Margin="5,0,0,0" Text="Comment: " />
												<TextBlock />
										        </StackPanel>
										</ToolTip>
									</Image.ToolTip>
								</Image>
							</StackPanel>
							<Rectangle Height="2" Margin="25,1,10,0" Stroke="{StaticResource DottedHorizontalSeparatorBrush}" StrokeThickness="1" StrokeDashArray="2 2" RenderOptions.EdgeMode="Aliased" Width="Auto" />
							<ComboBox Margin="25,5,10,0" x:Name="pList" Height="Auto" ItemsSource="{Binding Source={StaticResource PrinterListData}}" ItemTemplate="{StaticResource PrinterNameItemTemplate}" IsSynchronizedWithCurrentItem="True" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" />
							<TextBlock Margin="25,5,10,0" TextAlignment="Right" FontSize="12" ><Hyperlink x:Name="PrinterProperties" Foreground="Black" Click="PrinterProperties_Click"><Run Text="Printer Properties"/></Hyperlink></TextBlock>
							<shared:PixelSnapper>
								<TextBlock Margin="25,0,0,0" Text="Settings" FontSize="13" TextTrimming="CharacterEllipsis" FontWeight="Bold" Foreground="#5E5E5E" />
							</shared:PixelSnapper>
						</StackPanel>
					</Border>
				</ScrollViewer>
			</StackPanel>
		</Border>
                <Rectangle DockPanel.Dock="Left" Width="1" Fill="{StaticResource LargeVerticalSeparatorBrush}" HorizontalAlignment="Left" />
                <ScrollViewer>
                        <StackPanel DockPanel.Dock="Left">
                                <ContentControl Margin="7" x:Name="dscontentContainer2" Width="Auto" Height="300">
                                <StackPanel DockPanel.Dock="Bottom" x:Name="SliderBar2" Orientation ="Horizontal" HorizontalAlignment="Right">
                                    <StackPanel.Resources>
                                        <shared:PercentageConverter x:Key="PercentageConverter" />
                                    </StackPanel.Resources>
                                    <ribbon:Button Foreground="Black" Context="StatusBarItem" Margin="0,1,0,1" Padding="6,0,6,0" ScreenTipHeader="Zoom level: Click to open the Zoom dialog box." Label="{Binding Value, ConverterParameter=%, Converter={StaticResource PercentageConverter}, ElementName=scaleSlider2}" />
                                    <RepeatButton Margin="1,0,1,0" CommandTarget="{Binding ElementName=scaleSlider2}" ribbon:ScreenTipService.ScreenTipHeader="Zoom Out" Style="{StaticResource {x:Static themes:SharedResourceKeys.StatusBarEmbeddedSliderDecreaseButtonBaseStyleKey}}"/>
                                    <Slider x:Name="scaleSlider2" Width="100" Value="1.0" Minimum="0.5" Maximum="2.0" LargeChange="0.5" SmallChange="0.1" VerticalAlignment="Center"  IsSnapToTickEnabled="True" TickFrequency="0.1" ribbon:ScreenTipService.ScreenTipHeader="Zoom" />
                                    <RepeatButton Margin="1,0,1,0" CommandTarget="{Binding ElementName=scaleSlider2}" ribbon:ScreenTipService.ScreenTipHeader="Zoom In" Style="{StaticResource {x:Static themes:SharedResourceKeys.StatusBarEmbeddedSliderIncreaseButtonBaseStyleKey}}"/>
                                </StackPanel>
                                
                         </StackPanel>
                 </ScrollViewer>
        </DockPanel>
</ribbon:BackstageTab>

This in paticular isn what I want to be filling actually the right side of the Backstage window allowing the content to scroll inside the control.

 

<ContentControl Margin="7" x:Name="dscontentContainer2" Width="Auto" Height="300">

[Modified 7 years ago]

Comments (2)

Answer - Posted 7 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Adam,

Our Backstage control has some special code in it, including a ScrollViewer and a decorator, that are used to meet the Ribbon specification requirements for scrolling in minimum size scenarios.

The problem is that it breaks layout scenarios like yours since it tries to measure at ideal sizes.  We're going to update Backstage for the next maintenance release so that doing this should allow your layout to work as you'd expect:

<ribbon:Backstage ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">


Actipro Software Support

Answer - Posted 7 years ago by Adam Davis
Avatar

Works perfectly now, kudos to the actipro team for the update. Here is a screen shot.

http://www.adamtdavis.com/Print%20Tab.png

[Modified 7 years ago]

The latest build of this product (v2018.1 build 0675) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.