Custom Hub Control for WP8.1

Question

I have some problems with understanding how Hub Control is built. The main idea of what I want to understand is how to build a custom control which allows to perform some gestures and which will not block controls inside.

Using Hub control I can press a Button and see its callback (color and size changing) and then move pointer left slide the Hub control.

Sorry about this such a stupid question but I don't have enough experience to find any responses by myself. Thanks in advance about any advice.

Answer 1

The main problem was associated with using of GestureRecognizer. I have fixed my problem refusing to use GestureRecognizer and starting to use Manipulation Events over the main container.

The simplified template code:

<Style TargetType="my:CustomHub">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="my:CustomHub">
                <Grid x:Name="RootGrid">
                    <ContentPresenter x:Name="MainPresenter" 
                                      Content="{TemplateBinding Content}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Control's code-behind:

public sealed class CustomHub
{
    public FrameworkElement Container { get; set; }

    public MainView()
    {
        this.InitializeComponent();
    }

    private void InitGestureInteraction()
    {
        this.Container = (FrameworkElement)GetTemplateChild("RootGrid");
        this.Container.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateRailsX;

        this.Container.ManipulationStarted += (s, e) =>
        {
        };

        this.Container.ManipulationDelta += (s, e) =>
        {
            var x = e.Cumulative.Translation.X;
            // implementation of moving
        };

        this.Container.ManipulationCompleted += (s, e) =>
        {
            var x = e.Cumulative.Translation.X;
            // implementation of moving
        };
    }
}