在WPF中的stackpanel中滚动到活动tabcontrol标头

时间:2016-08-04 14:17:31

标签: c# wpf tabcontrol

使用以下代码,我可以创建一个tabcontrol标头的非包装滚动堆栈面板。它有重复按钮,可以控制滚动。我希望重复按钮能够控制哪个选项卡处于活动状态,并调整滚动以使活动选项卡可以滚动到视图中。这样的事情有可能吗?

<TabControl SelectedItem="{Binding ActiveTicketFilterTab, Mode=TwoWay}" 
                                Margin="5"  
                                Grid.Row="1" 
                                BorderBrush="Gray"
                                BorderThickness="2"
                                Style="{StaticResource ResourceKey=somestyle}" 
                                SelectionChanged="selectionchanged" 
                                Name="somename" 
                                Background="#252525"
                                ItemsSource="{Binding someobslist}" 
                                Grid.ColumnSpan="2">
                        <TabControl.Resources>
                            <Style x:Key="TabScrollerRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate>
                                            <Border Background="sc#1, 0.366693377, 0.372125238, 0.6931424">
                                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding ContentControl.Content}"/>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </TabControl.Resources>

                        <TabControl.Template>
                            <ControlTemplate TargetType="{x:Type TabControl}">
                                <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="ColumnDefinition0"/>
                                        <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                        <RowDefinition x:Name="RowDefinition1" Height="*"/>
                                    </Grid.RowDefinitions>
                                    <ScrollViewer  Panel.ZIndex="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
                                        <ScrollViewer.Style>
                                            <Style TargetType="{x:Type ScrollViewer}">
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate>
                                                            <Grid Margin="0,0,0,0" Grid.Row="0" Grid.Column="0" x:Name="HeaderPanel">
                                                                <Grid.ColumnDefinitions>
                                                                    <ColumnDefinition Width="*"/>
                                                                    <ColumnDefinition Width="50"/>
                                                                </Grid.ColumnDefinitions>
                                                                <Grid.RowDefinitions>
                                                                    <RowDefinition Height="Auto"/>
                                                                </Grid.RowDefinitions>

                                                                <ScrollContentPresenter Grid.Column="0" Content="{TemplateBinding ScrollViewer.Content}" />
                                                                <StackPanel Orientation="Horizontal"  Grid.Column="1">
                                                                    <RepeatButton Style="{StaticResource TabScrollerRepeatButtonStyle}" Content="&lt;" Command="ScrollBar.LineLeftCommand"/>
                                                                    <RepeatButton Style="{StaticResource TabScrollerRepeatButtonStyle}" Content="&gt;" Command="ScrollBar.LineRightCommand"/>
                                                                </StackPanel>
                                                            </Grid>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </ScrollViewer.Style>
                                        <StackPanel  x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" Orientation="Horizontal"/>
                                    </ScrollViewer>
                                        <Border x:Name="ContentPanel" 
                                            BorderBrush="{TemplateBinding BorderBrush}" 
                                            BorderThickness="{TemplateBinding BorderThickness}" 
                                            Background="{TemplateBinding Background}" 
                                            Grid.Row="1"
                                            Grid.Column="0" 
                                            Margin="2,-2, 0, 13"
                                            KeyboardNavigation.DirectionalNavigation="Contained" 
                                            KeyboardNavigation.TabIndex="2" 
                                            KeyboardNavigation.TabNavigation="Local">
                                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </TabControl.Template>



                        <TabControl.ItemContainerStyle>
                            <Style TargetType="TabItem" BasedOn="{StaticResource someotherstyle}">
                                <Setter Property="HeaderTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <Border BorderBrush="{x:Null}" Height="25">
                                                <TextBlock Padding="10"  Name="Title"  VerticalAlignment="Center" TextTrimming="CharacterEllipsis"  HorizontalAlignment="Stretch" Text="{Binding Name}" ToolTip="{Binding Name}" />
                                            </Border>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </TabControl.ItemContainerStyle>
                        <TabControl.ContentTemplate>
                            <DataTemplate>
                                <Grid Background="Transparent">
                                    <ListBox    x:Name="ticketView"   
                                                Unloaded="On_Listbox_enter"
                                                ItemsSource="{Binding TicketsView}"
                                                Background="#252525"
                                                Margin="5,5,0,0"
                                                HorizontalContentAlignment="Stretch"
                                                BorderBrush="{x:Null}"
                                                BorderThickness="1" 
                                                Padding="0,0,5,0"
                                                VirtualizingPanel.IsVirtualizing="False"
                                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                                ScrollViewer.VerticalScrollBarVisibility="Auto"
                                                ScrollViewer.CanContentScroll="False" 
                                                ItemTemplate="{StaticResource TicketViewTemplate}">
                                        <ListBox.Resources>
                                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#252525" />
                                            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />                                           
                                        </ListBox.Resources>
                                    </ListBox>

                                    <StackPanel Grid.Row="0" Margin="328,75"
                                            Visibility="{Binding ExposeTicketSpinner, Converter={StaticResource BoolToVisConverter}}" 
                                            Width="Auto">

                                        <Viewbox Grid.Row="0"
                                             Height="100"
                                             Width="100"
                                             HorizontalAlignment="Stretch" 
                                             VerticalAlignment="Stretch">
                                            <WPFControls:CircularProgressBar HorizontalAlignment="Center" VerticalAlignment="Center" />
                                        </Viewbox>
                                        <Label Foreground="White" FontWeight="Bold"  Margin="0,33"  Content="Loading Tickets..." HorizontalAlignment="Center"></Label>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </TabControl.ContentTemplate>
                    </TabControl>

1 个答案:

答案 0 :(得分:1)

要使您的工作符合要求,请执行以下操作:

<强>第一

用此

替换您的重复按钮
<RepeatButton Style="{StaticResource TabScrollerRepeatButtonStyle}" Content="&lt;" Command="{Binding MoveLeftCommand}"/>
<RepeatButton Style="{StaticResource TabScrollerRepeatButtonStyle}" Content="&gt;" Command="{Binding MoveRightCommand}"/>

<强>第二

在你的ViewModel(包含TabControl)中,这样做:

public ICommand MoveLeftCommand => new RelayCommand(x => {
            var currIdx = this.someobslist.IndexOf(this.ActiveTicketFilterTab);
            this.ActiveTicketFilterTab = currIdx == 0 ? this.someobslist[this.someobslist.Count - 1] : this.someobslist[currIdx - 1];
        });

        public ICommand MoveRightCommand => new RelayCommand(x => {
            var currIdx = this.someobslist.IndexOf(this.ActiveTicketFilterTab);
            this.ActiveTicketFilterTab = currIdx == this.someobslist.Count - 1 ? this.someobslist[0] : this.someobslist[currIdx + 1];
        });

多数民众赞成。如果您需要RelayCommand,我可以将您交给我。当然用你的替换我的Varaibles。

此解决方案现在通过TabItems

圈出

修改

这是一个普通的scrollroller,没有导航到TabItem,基于this&lt; --- 重要

在XAML中添加到ScrollViewer Loaded - 事件

这里是代码:

private int _scollMoverIdx = 0;
    private TabControl _container;

    private void ScrollViewer_OnLoaded(object sender, RoutedEventArgs e) {
      this._container = (sender as ScrollViewer).TemplatedParent as TabControl;
    }

    public ICommand MoveLeftCommand => new RelayCommand(x => {
      if (this._scollMoverIdx == 0) {
        this._scollMoverIdx = this.someobslist.Count - 1;
        this._container.ScrollToCenterOfView(this.someobslist[_scollMoverIdx]);
      } else {
        _scollMoverIdx--;
        this._container.ScrollToCenterOfView(this.someobslist[_scollMoverIdx]);
      }

    });

    public ICommand MoveRightCommand => new RelayCommand(x => {
      if (this._scollMoverIdx == this.someobslist.Count - 1) {
        this._scollMoverIdx = 0;
        this._container.ScrollToCenterOfView(this.someobslist[_scollMoverIdx]);
      } else {
        _scollMoverIdx++;
        this._container.ScrollToCenterOfView(this.someobslist[_scollMoverIdx]);
      }
    });

它不是很漂亮,但我想保持简单。链接的扩展方法对可重用性(Credits to Ray Burns)很重要。如果你想让它符合MVVM,我建议你制作一个CustomControl,因为从ViewModel滚动会破坏模式。

干杯