在XAML中實現IE/Microsoft Edge底部欄

我是Windows手機瀏覽器的狂熱粉絲，我想將類似的底欄移植到我的應用程序中。現在，我正在使用標準CommandBar。在XAML中實現IE/Microsoft Edge底部欄

<Page.BottomAppBar> 
    <CommandBar> 
     <AppBarButton Icon="Go" Click="Go"/> 
     <CommandBar.SecondaryCommands> 
      <AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/> 
     </CommandBar.SecondaryCommands> 
    </CommandBar> 
</Page.BottomAppBar>

這樣做會浪費屏幕空間，我真的想利用巴的剩餘空間來添加類似的應用程序狀態（到位邊緣/ IE的地址欄），像下載/上傳進展。不幸的是，CommandBar不允許引入諸如TextBlock或ProgressRing之類的內容。要使用這些控件，我們需要改爲改爲AppBar。但是，我不能使用CommandBar的功能，如添加3個點按鈕來打開隱藏的按鈕。

是否有一種簡單的方法來實現這一點，即結合AppBar的靈活性和CommandBar的3點特徵？

來源

2015-08-15 An Hoa

CommandBar只接受繼承ICommandBarElement接口的控件。

我們可以創建一個用戶控件，其繼承ICommandBarElement，只是做了一個小測試，而不優化代碼，看看，看看是否有幫助：

public sealed partial class MyUserControl1 : UserControl, ICommandBarElement 
{ 
    public MyUserControl1() 
    { 
     this.InitializeComponent(); 
    } 
    private bool _IsCompact = true; 
    bool ICommandBarElement.IsCompact 
    { 
     get 
     { 
      return _IsCompact; 
     } 

     set 
     { 
      _IsCompact = value; 
     } 
    } 
}

另外，用戶控件XAML：

<UserControl 
x:Class="App10.MyUserControl1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App10" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
d:DesignWidth="400" Height="38.027"> 

<Grid> 
    <TextBlock Foreground="DarkBlue">asdsadasdasdasdasda</TextBlock> 
</Grid>

然後我們在CommandBar中使用userControl，這裏我們去： http://i.stack.imgur.com/Bgug9.png

注意：請進一步優化它，例如註冊一些文本依賴項屬性以啓用接受數據綁定。

來源

2015-08-24 10:04:32

任何想法如何推動文本對齊左側的酒吧或拉伸控件採取像邊緣的可用空間？我嘗試過'HorizontalAlignment ='Stretch''，這在典型情況下使用，但在這種情況下不起作用。 –

根據documentation on MSDN可以使用CommandBar.Content屬性，該屬性對應於任何主要命令旁邊的空白區域。要改變內容的對齊方式，您需要更改CommandBar.HorizontalContentAlignment屬性。

<CommandBar HorizontalContentAlignment="Stretch"> 
     <AppBarButton Icon="Go" Click="Go"/> 
     <CommandBar.SecondaryCommands> 
      <AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/> 
     </CommandBar.SecondaryCommands> 
     <CommandBar.Content> 
      <Grid> 
       <TextBox HorizontalAlignment="Stretch" 
        VerticalAlignment="Top" 
        Margin="12,8"/> 
      </Grid> 
     </CommandBar.Content> 
    </CommandBar>

而作爲Win10的建議是把命令欄內聯，而不是使用Page.TopAppBar或Page.BottomAppBar屬性。您可能仍然希望使用Page.BottomAppBar屬性的一種情況是確保CommandBar在軟件鍵盤出現時保持可見。

來源

2016-05-14 07:59:51

在XAML中實現IE/Microsoft Edge底部欄

回答

相關問題