Question

我正在开发一个地铁应用程序，当用户点击屏幕上的某些内容时，我希望有一个自定义的条形图。

这就是我所说的： -

 --------------
|          |   |
|          |   |  <----
|          |   |
 ---------------
main screen  side
              bar

在这个侧栏我想要一些简单的控件，如图像和文本块等。

1）我怎么能这样做，任何帮助将不胜感激

2）它不反对地铁原则吗？

Answer 1

你可以尝试利用像设置弹出窗口一样的弹出按钮。您可能需要查看Callisto。

否则，您可以在其他所有其他元素上包含一个Xaml元素，并在屏幕上切换它的可见性以及定位权限。如何定位取决于您正在使用的根元素。要在画布中定位元素，请将Canvas.Right="0"添加到子元素。

Answer 2

您可以使用 PopUp 。

看一下这个例子，

http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

Answer 3

您可以使用以下帮助

WinRT Flyout Helper

public class FlyoutHelper
{
    protected Popup m_Popup = new Popup();
    public Popup Show(Popup popup, FrameworkElement button, double offset = 35d)
    {
        if (popup == null)
            throw new Exception("Popup is not defined");
        m_Popup = popup;
        if (button == null)
            throw new Exception("Button is not defined");
        if (double.IsNaN(offset))
            throw new Exception("Offset is not defined");
        var _Child = popup.Child as FrameworkElement;
        if (_Child == null)
            throw new Exception("Popup.Child is not defined");
        if (double.IsNaN(_Child.Height))
            throw new Exception("Popup.Child.Height is not defined");
        if (double.IsNaN(_Child.Width))
            throw new Exception("Popup.Child.Width is not defined");

        // get position of the button
        var _Page = Window.Current.Content as Page;
        var _Visual = button.TransformToVisual(_Page);
        var _Point = _Visual.TransformPoint(new Point(0, 0));
        var _Button = new
        {
            Top = _Point.Y,
            Left = _Point.X,
            Width = button.ActualWidth,
            Height = button.ActualHeight,
        };

        // determine location
        var _TargetTop = (_Button.Top + (_Button.Height / 2)) - 
                         _Child.Height - offset;
        var _TargetLeft = (_Button.Left + (_Button.Width / 2)) - 
                          (_Child.Width / 2);

        if ((_TargetLeft + _Child.Width) > Window.Current.Bounds.Width)
            _TargetLeft = Window.Current.Bounds.Width - _Child.Width - offset;
        if (_TargetLeft < 0)
            _TargetLeft = offset;

        // setup popup
        popup.VerticalOffset = _TargetTop;
        popup.HorizontalOffset = _TargetLeft;

        // add pretty animation(s)
        popup.ChildTransitions = new TransitionCollection 
        { 
            new EntranceThemeTransition 
            { 
                FromHorizontalOffset = 0, 
                FromVerticalOffset = 20 
            }
        };

        // setup
        m_Popup.IsLightDismissEnabled = true;
        m_Popup.IsOpen = true;

        // handle when it closes
        m_Popup.Closed -= popup_Closed;
        m_Popup.Closed += popup_Closed;

        // handle making it close
        Window.Current.Activated -= Current_Activated;
        Window.Current.Activated += Current_Activated;

        // return
        return m_Popup;
    }

    protected void Current_Activated(object sender, WindowActivatedEventArgs e)
    {
        if (m_Popup == null)
            return;
        if (e.WindowActivationState == CoreWindowActivationState.Deactivated)
            m_Popup.IsOpen = false;
    }

    protected void popup_Closed(object sender, object e)
    {
        Window.Current.Activated -= Current_Activated;
        if (m_Popup == null)
            return;
        m_Popup.IsOpen = false;
    }
}

Answer 4

为此你可以使用CharmFlyout 以下是示例代码
http://code.msdn.microsoft.com/windowsapps/CharmFlyout-A-Metro-Flyout-25fe53b6

如何在地铁应用程序中右侧自定义侧栏滑动？

4 个答案: