Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1385
Prevent ApplicationMenu2010 from scrolling
posted

On one of our backstage tabs there is content that is larger than the backstage height.  We don't want the backstage to scroll, so right now we are copying the template for the backstage and commenting out the ScrollViewer.  I'm wondering if there is a better way to do that.  I tried binding the MaxHeight of the ApplicationMenu2010 to the ActualHeight of the window, but that did not work.

Without the code:

The desired behavior, which we do by retemplating:

The overriden template:

<Style TargetType="igRibbon:ApplicationMenu2010">
<Setter Property="KeyboardNavigation.DirectionalNavigation"
Value="Cycle" />
<Setter Property="KeyboardNavigation.TabNavigation"
Value="Cycle" />
<Setter Property="UseLayoutRounding"
Value="True" />
<Setter Property="Background"
Value="White" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igRibbon:ApplicationMenu2010">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="{Binding Path=ChildDesiredWidth, ElementName=MenuItemArea}" />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<Rectangle Grid.RowSpan="2"
Fill="{TemplateBinding Background}" />
<Rectangle Grid.RowSpan="2"
RenderTransform="{TemplateBinding SlideTransform}"
IsHitTestVisible="False">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Path=(igRibbon:XamRibbon.Ribbon).ApplicationAccentColor, RelativeSource={RelativeSource TemplatedParent}}" />
</Rectangle.Fill>
</Rectangle>

<Grid x:Name="OverlayArea"
Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition MinHeight="{TemplateBinding CaptionOverlayHeight}"
MaxHeight="{TemplateBinding CaptionOverlayHeight}" />
<RowDefinition MinHeight="{Binding Path=(igRibbon:XamRibbon.Ribbon).TabHeaderActualHeight, RelativeSource={RelativeSource TemplatedParent}}"
MaxHeight="{Binding Path=(igRibbon:XamRibbon.Ribbon).TabHeaderActualHeight, RelativeSource={RelativeSource TemplatedParent}}" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="{Binding Path=ChildDesiredWidth, ElementName=MenuItemArea}" />
<ColumnDefinition />
<ColumnDefinition Width="{Binding Path=(igRibbon:XamRibbon.Ribbon).TabItemAreaToolbar.ActualWidth, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid.ColumnDefinitions>

<!-- add an overlay to hide th tab items -->
<Rectangle x:Name="PART_TabAreaOverlay"
Grid.Row="1"
Grid.Column="1"
Grid.RowSpan="2"
Fill="{TemplateBinding Background}"
MinHeight="{TemplateBinding TabAreaOverlayHeight}" />

<!-- add an overlay for under the TabItemAreaToolbar to hide any chrome in that area -->
<Rectangle Grid.Row="2"
Grid.Column="2"
Fill="{TemplateBinding Background}" />

<igWindows:DesiredSizeDecorator Grid.RowSpan="3"
RenderTransform="{TemplateBinding SlideTransform}">
<Button x:Name="BackButton"
Foreground="{Binding Path=(igRibbon:XamRibbon.Ribbon).ApplicationAccentColor, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource calculatedForegroundConverter}}"
Command="{x:Static igRibbon:RibbonCommands.CloseApplicationMenu}"
Style='{DynamicResource {x:Static igRibbon:ApplicationMenu2010.BackButtonStyleKey }}' />
</igWindows:DesiredSizeDecorator>

</Grid>

<!-- the entire area scrolls as a unit -->
<!--<ScrollViewer Focusable="False">-->
<Grid Grid.Row="1"
Grid.ColumnSpan="2"
Background="{StaticResource LightForegroundBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="{Binding Path=DesiredSize.Width, ElementName=BackButton}" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2"
Fill="{TemplateBinding Background}" />
<Rectangle RenderTransform="{TemplateBinding SlideTransform}">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Path=(igRibbon:XamRibbon.Ribbon).ApplicationAccentColor, RelativeSource={RelativeSource TemplatedParent}}" />
</Rectangle.Fill>
</Rectangle>

<igWindows:DesiredSizeDecorator x:Name="MenuItemArea">
<Border RenderTransform="{TemplateBinding SlideTransform}"
BorderBrush="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ApplicationMenu2010ItemAreaBorderFillKey}}"
BorderThickness="0">
<ItemsPresenter Margin="0,0,-1,0"
KeyboardNavigation.DirectionalNavigation="Cycle"
KeyboardNavigation.TabNavigation="Once" />
</Border>
</igWindows:DesiredSizeDecorator>

<ContentPresenter x:Name="PART_SelectedTabContentHost"
Grid.Column="1"
RenderTransform="{TemplateBinding SlideTransform}"
KeyboardNavigation.DirectionalNavigation="Cycle"
Content="{Binding SelectedTab.Content, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding SelectedTab.ContentTemplate, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplateSelector="{Binding SelectedTab.ContentTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
ContentStringFormat="{Binding SelectedTab.ContentStringFormat, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="{Binding SelectedTab.HorizontalContentAlignment, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="{Binding SelectedTab.VerticalContentAlignment, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<!--</ScrollViewer>-->
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=(igRibbon:XamRibbon.Ribbon).TabItemAreaToolbar, RelativeSource={RelativeSource Self}}"
Value="{x:Null}">
<Setter TargetName="PART_TabAreaOverlay"
Property="Grid.ColumnSpan"
Value="2" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Parents
No Data
Reply
  • 34810
    Verified Answer
    Offline posted

    Hello Walter,

    I have been investigating into the behavior you are looking to achieve in which you prevent the entire ApplicationMenu2010 from scrolling, and I do not believe it is necessary to re-template the entire ApplicationMenu2010 to do this. Instead, you can simply set the attached ScrollViewer.VerticalScrollBarVisibility property to “Disabled” on the ApplicationMenu2010 itself. For example, in XAML, this would look like the following:

    <ig:ApplicationMenu2010 ScrollViewer.VerticalScrollBarVisibility = “Disabled”>

    I hope this helps. Please let me know if you have any other questions or concerns on this matter.

Children