如何添加動態控件在XAML應用程序爲Windows 8

我想提出一個網格的應用，並在ItemsDetaiPage.xaml如何添加動態控件在XAML應用程序爲Windows 8

<common:LayoutAwarePage 
x:Name="pageRoot" 
x:Class="App6.ItemDetailPage" 
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" 
IsTabStop="false" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App6" 
xmlns:data="using:App6.Data" 
xmlns:common="using:App6.Common" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 

<Page.Resources> 

    <!-- Collection of items displayed by this page --> 
    <CollectionViewSource 
     x:Name="itemsViewSource" 
     Source="{Binding Items}" 
     d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/> 
</Page.Resources> 

<!-- 
    This grid acts as a root panel for the page that defines two rows: 
    * Row 0 contains the back button and page title 
    * Row 1 contains the rest of the page layout 
--> 
<Grid 
    Style="{StaticResource LayoutRootStyle}" 
    DataContext="{Binding Group}" 
    d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"> 

    <Grid.RowDefinitions> 
     <RowDefinition Height="140"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <!-- Back button and page title --> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> 
     <TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1"/> 
    </Grid> 

    <!-- 
     The remainder of the page is one large FlipView that displays details for 
     one item at a time, allowing the user to flip through all items in the chosen 
     group 
    --> 
    <FlipView 
     x:Name="flipView" 
     AutomationProperties.AutomationId="ItemsFlipView" 
     AutomationProperties.Name="Item Details" 
     TabIndex="1" 
     Grid.Row="1" 
     Margin="0,-3,0,0" 
     ItemsSource="{Binding Source={StaticResource itemsViewSource}}"> 

     <FlipView.ItemTemplate> 
      <DataTemplate> 

       <!-- 
        UserControl chosen as the templated item because it supports visual state management 
        Loaded/unloaded events explicitly subscribe to view state updates from the page 
       --> 
       <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"> 
        <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1"> 

         <!-- Content is allowed to flow across as many columns as needed --> 
         <Grid Margin="120,0,20,20"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="800"></ColumnDefinition> 
           <ColumnDefinition Width="40"></ColumnDefinition> 
           <ColumnDefinition Width="400"></ColumnDefinition> 
           <ColumnDefinition Width="40"></ColumnDefinition> 
           <ColumnDefinition Width="200"></ColumnDefinition> 
          </Grid.ColumnDefinitions> 
          <StackPanel Orientation="Vertical" Grid.Column="0"> 
           <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/> 
           <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Date}" TextWrapping="Wrap"/> 
           <WebView x:Name="webView" Width="800" Height="500"/> 
           <StackPanel x:Name="spButton" Orientation="Horizontal"> 

           </StackPanel> 
          </StackPanel> 
          <StackPanel Orientation="Vertical" Grid.Column="2"> 
           <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Description}" TextWrapping="Wrap"/> 
          </StackPanel> 
          <StackPanel Orientation="Vertical" Grid.Column="4"> 
           <TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Tag}" TextWrapping="Wrap"/> 
          </StackPanel> 
         </Grid> 
         <VisualStateManager.VisualStateGroups> 

          <!-- Visual states reflect the application's view state inside the FlipView --> 
          <VisualStateGroup x:Name="ApplicationViewStates"> 
           <VisualState x:Name="FullScreenLandscape"/> 
           <VisualState x:Name="Filled"/> 

           <!-- Respect the narrower 100-pixel margin convention for portrait --> 
           <VisualState x:Name="FullScreenPortrait"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="97,0,87,57"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="400"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 

           <!-- When snapped, the content is reformatted and scrolls vertically --> 
           <VisualState x:Name="Snapped"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="17,0,17,57"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer" Storyboard.TargetProperty="Style"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewerStyle}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBlock" Storyboard.TargetProperty="Width"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="280"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="160"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </ScrollViewer> 
       </UserControl> 
      </DataTemplate> 
     </FlipView.ItemTemplate> 
    </FlipView> 

    <VisualStateManager.VisualStateGroups> 

     <!-- Visual states reflect the application's view state --> 
     <VisualStateGroup x:Name="ApplicationViewStates"> 
      <VisualState x:Name="FullScreenLandscape"/> 
      <VisualState x:Name="Filled"/> 

      <!-- The back button respects the narrower 100-pixel margin convention for portrait --> 
      <VisualState x:Name="FullScreenPortrait"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 

      <!-- The back button and title have different styles when snapped --> 
      <VisualState x:Name="Snapped"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid>

我的應用合成片段，每一個項目是一個遊戲，每個遊戲有意見，在StackPanel spButton我想添加按鈕作爲播放視頻的鏈接。如何在文件中添加動態按鈕.cs

來源

2013-01-09 Thanh Le

如果我理解正確，您想將按鈕內容綁定到WebView瀏覽的頁面，對不對？ – Tilak

是的，那是對的。點擊該按鈕，Webview顯示按鈕內容的鏈接。你可以幫我嗎？ –

這是通過View Model調用控件方法的典型情況。

要做到這一點，你需要以下步驟
1.定義暴露Navigate事件
2.實現接口ViewModel接口INavigatable。
3.在後面的查看代碼中，檢查DataContext是否實現INavigatable接口。
4.如果步驟3爲真，請在後面查看代碼中訂閱View Model事件。

例子。

步驟1：

class NavigateEventArgs:EventArgs 
{ 
    public string Target {get;set;} 
} 

public delegate void NavigateEventHandler (object sender, NavigateEventArgs nargs); 

public interface INavigatable 
{ 
    event NavigateEventHandler Navigate; 
}

步驟2：

class MyViewModel : INavigatable 
{ 
    public event NavigateEventHandler Navigate; 

    MyViewModel() 
    { 
     NavigateCommand = new DelegateCommand(() => 
     { 
      RaiseNavigateEvent(); 
     }) ; 
    } 

    void RaiseNavigateEvent() 
    { 
     var temp = Navigate; 
     if (temp != null) 
     { 
      temp(new NavigateEventArgs{Target = Link}); 
     } 
    } 

    public string Link {get;set;} // this should be bound to Button.Content (preferably in XAML) 
    public ICommand NavigateCommand{ get;set;} 
}

步驟3/4：

public class MyView : Window 
{ 
    public MyView() 
    { 
     ... 
     Load += (s,e)=> 
     { 
      if (this.DataContext is INavigatable) 
      { 
       ((INavigatable)(this.DataContext)).Navigate += (s1,e1) => webView.Navigate(e1.Target); 
      } 
     } 

    } 
}

作爲改進，訂閱/在DataContextChanged事件退訂事件導航代替Load事件

來源

2013-01-09 05:42:50 Tilak

如何添加動態控件在XAML應用程序爲Windows 8

回答

相關問題