กำหนด HubSection ที่เลือกใน Hub ด้วย HubSection สองอัน

@Depechie ชี้ให้คุณไปในทิศทางที่ถูกต้อง .. คุณสามารถใช้ การควบคุม SelectionHub ฉันสร้างและเพิ่มเหตุการณ์ลงไปซึ่งจะเริ่มทำงานเมื่อดัชนีที่เลือกเปลี่ยนแปลง

public event EventHandler SelectionChanged;

private static void OnSelectedIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var hub = d as SelectionHub;
    if (hub == null) return;

    // do not try to set the section when the user is swiping
    if (hub._settingIndex) return;

    // No sections?!?
    if (hub.Sections.Count == 0) return;
    hub.OnSelectionChanged();
}

private void OnSelectionChanged()
{
    var section = Sections[SelectedIndex];
    ScrollToSection(section);
    var handler = SelectionChanged;
    if(handler != null)
    {
        handler(this, EventArgs.Empty);
    }
}

คุณสามารถขยายสิ่งนี้ได้โดยเพิ่มตัวเลือกที่เปลี่ยนแปลง args ของเหตุการณ์ลงไป ด้วยวิธีนี้ คุณสามารถสมัครรับกิจกรรมในโค้ดของคุณด้านหลัง และเปลี่ยนปุ่มแถบแอปตามดัชนีได้

หลังจากอ่าน บทความของ Shawn แนะนำโดย @Depechie ฉันพยายามใช้โซลูชันเดียวกันนี้ในแอปของฉันเพื่ออัปเดตเนื้อหาของ AppBar ด้วยปุ่มเฉพาะส่วน

แม้ว่าฉันจะพยายามแล้ว แต่ฉันก็ไม่สามารถทำงานได้ ดังนั้นฉันจึงปรับเปลี่ยนวิธีแก้ปัญหาบางส่วน ฉันใช้วิธีแก้ปัญหาพฤติกรรมและเปลี่ยนเฉพาะ ScrollerOnViewChangedfunction ดังนี้ นี่อาจไม่ใช่วิธีที่ดีที่สุดหรืออาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดในสถานการณ์ต่างๆ แต่ในกรณีของฉันมันใช้งานได้โดยไม่มีปัญหา

    private void ScrollerOnViewChanged(object sender, ScrollViewerViewChangedEventArgs scrollViewerViewChangedEventArgs)
    {
        _settingIndex = true;
        ScrollViewer scrollViewer = sender as ScrollViewer;
        if (scrollViewer.HorizontalOffset > (scrollViewer.ViewportWidth / 2))
            SelectedIndex = 1;
        else
            SelectedIndex = 0;

        _settingIndex = false;
    }

หลังจากนั้นฉันได้เพิ่มคุณสมบัติใน viewmodel ของฉันเพื่อจัดเก็บดัชนีที่เลือก

    private int _selectedIndex;

    public int SelectedIndex
    {
        get { return _selectedIndex; }
        set
        {
            SetProperty(ref this._selectedIndex, value);
        }
    }

ฉันใช้ลักษณะการทำงานใน XAML เพื่ออัปเดต SelectedIndex ใน ViewModel ของฉัน

<Hub>
    <i:Interaction.Behaviors>
        <behaviors:HubSelectionBehavior SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" />
    </i:Interaction.Behaviors>

    <HubSection>...</HubSection>
    <HubSection>...</HubSection>
</Hub>

สิ่งสุดท้ายที่ต้องทำคือตั้งค่าการเปิดเผย AppBarButtons โดยใช้คุณสมบัตินี้ SectionIndexToVisibilityConverter เปรียบเทียบ SelectedIndex กับ ConverterParameter และส่งกลับ Visibility.Visible หากเท่ากัน

<CommandBar>
    <AppBarButton Label="Open" Icon="World" Command="{Binding OpenInBrowserCommand}" Visibility="{Binding SelectedIndex, Converter={StaticResource SectionIndexToVisibilityConverter}, ConverterParameter=0}"/>

    <AppBarButton Label="Previous" Icon="Back" Command="{Binding PreviousAnswerCommand}" Visibility="{Binding SelectedIndex, Converter={StaticResource SectionIndexToVisibilityConverter}, ConverterParameter=1}"/>
    <AppBarButton Label="Next" Icon="Forward" Command="{Binding NextAnswerCommand}" Visibility="{Binding SelectedIndex, Converter={StaticResource SectionIndexToVisibilityConverter}, ConverterParameter=1}"/>
</CommandBar>

ขอบคุณ @Depechie ที่แนะนำบทความและ @Shawn ที่เขียนบทความ :)