XAML-將內容添加到選項卡式窗口

Question

我正在使用一個用C＃編寫的應用程序-該應用程序的主顯示是使用Visual Studio中的XAML標記編寫/創建的，並且該應用程序根據需要執行其所有當前功能。

我的意圖是在應用程序中嵌入Web瀏覽器，以允許用戶直接從應用程序內部與特定網站進行交互。

為此，我想在應用程序內部創建一個“選項卡式”顯示，第一個選項卡將按當前狀態顯示該應用程序，並允許用戶以與當前相同的方式與其交互。 第二個選項卡將在應用程序窗口內向用戶顯示網站，從而允許用戶以與在Web瀏覽器中相同的方式與網站進行交互。

顯示當前應用程序的.xaml文件中的xml如下：

<Window x:Class="RiviamAgent.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="RIVIAM | CONNECTOR" Height="640" Width="640"
    ResizeMode="NoResize">

<Grid>
    <Menu IsMainMenu="True" Background="White">
        <MenuItem Header="_View">
            <MenuItem Header="_Connections">
                <MenuItem x:Name="rivMenu" Header="_RIVIAM Cloud" Click="connectorInfo">
                </MenuItem>
                <Separator />
                <MenuItem x:Name="tppMenu" Header="_TPP SystmOne" Click="connectorInfo">
                </MenuItem>
                <MenuItem x:Name="emisMenu" Header="_EMIS Web" Click="connectorInfo">
                </MenuItem>
            </MenuItem>
            <MenuItem Header="_Diagnostics" Click="diagMode"/>
            <MenuItem Header="_About" Click="About_Riviam"/>
        </MenuItem>
    </Menu>


    <Image x:Name="rivlogo" Height="128" Width="128" Margin="451,49,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="ic_launcher.png"/>
    <Image x:Name="connectedFlag" Height="30" Width="30" Margin="479,193,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="cloud.png"/>
    <Image x:Name="disconnectedFlag" Height="30" Width="30" Margin="479,193,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="cloud_dark.png"/>
    <TextBlock x:Name="unsentMsgs" Height="30" Width="30" Margin="479,193,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  Text="!"/>

    <Image x:Name="tppFlag" Source="tppswoosh.png"  Margin="529,193,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="30" Width ="60"/>
    <Image x:Name="emisFlag" Source="emiswoosh.png"  Margin="529,193,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="30" Width ="60"/>


    <TextBlock x:Name="blah1" HorizontalAlignment="Left" Margin="41,52,0,0" TextWrapping="Wrap" Text="Select service to refer to:" VerticalAlignment="Top"/>
    <TextBlock x:Name="blah2" HorizontalAlignment="Left" Margin="41,89,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="56" Width="136"><Run Text="Select referral document:
                                                                                                                                                           (or drag it to the logo)"/></TextBlock>
    <TextBlock x:Name="blahfoot" HorizontalAlignment="Left" Margin="319,10,0,0" TextWrapping="Wrap" Text="RIVIAM - Secure cloud for Health and Social Care" VerticalAlignment="Top" Height="24" Width="260"/>

    <ComboBox x:Name="serviceList" Text="pls select"  HorizontalAlignment="Left" Margin="182,49,0,0" VerticalAlignment="Top" Width="218" ></ComboBox>
    <TextBox x:Name="fileName" Text=" " MaxLines="1" IsReadOnly="True" Margin="182,90,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  Height="23" Width="161"/>
    <Button x:Name="fileBtn" Content="Browse" HorizontalAlignment="Left" Margin="348,90,0,0" VerticalAlignment="Top" Width="52" Click="fileUpload" Height="23"/>
    <Button x:Name="referBtn" Content="Send Referral and Patient Record" HorizontalAlignment="Left" Margin="182,150,0,0" VerticalAlignment="Top" Width="218" Click="referThis" Height="23"/>

    <TextBlock x:Name="blahfoot_Copy" HorizontalAlignment="Left" Margin="39,198,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="49" Width="361"><Run FontWeight="Bold" Text="Notice"/><Run Text=": "/><Run Text="You must ensure that the patient has agreed to their data being shared "/><Run Text="with the provider. Please contact the RIVIAM help desk on 01225 945 020 if you are unsure."/></TextBlock>

    <!-- end of normal view -->

    <ScrollViewer x:Name="scroller" HorizontalAlignment="Left" VerticalScrollBarVisibility="Auto" Margin="39,329,0,0" VerticalAlignment="Top" Height="244" Width="327">
        <TextBox x:Name="infoPane" TextWrapping="Wrap" Text="nothing" IsReadOnly="True"/>
    </ScrollViewer>

    <Button x:Name="f1Btn" Content="view Logs" HorizontalAlignment="Left" Margin="408,361,0,0" VerticalAlignment="Top" Width="121" Click="testFunction1"/>
    <Button x:Name="f2Btn" Content="delete logs" HorizontalAlignment="Left" Margin="408,393,0,0" VerticalAlignment="Top" Width="121" Click="testFunction2"/>
    <Button x:Name="f3Btn" Content="test function 3" HorizontalAlignment="Left" Margin="408,425,0,0" VerticalAlignment="Top" Width="121" Click="testFunction3"/>

    <Button x:Name="cntxtBtn" Content="context" HorizontalAlignment="Left" Margin="408,553,0,0" VerticalAlignment="Top" Width="121" Click="Context_Click"/>

</Grid>

我現在正在嘗試編輯XML以顯示兩個選項卡-一個顯示應用程序的位置，第二個顯示網站。

不過我不確定的是，一旦添加了<TabControl></TabControl>標記，該如何在<TabItem></TabItem>標記內顯示當前標記（針對當前的應用程序） ？

我嘗試在</Menu>標記下編寫以下內容：

<TabControl>
    <TabItem Header="Application">
        ...
        Existing markup goes here...
        ...
    </TabItem>
</TabControl>

但是，當我這樣做時，現有標記的第一行看起來不錯，但是其余的部分都帶有下划線（表明存在編譯錯誤）。 將光標懸停在其上時顯示的錯誤消息是

屬性“內容”已設置多次。

因此，我的問題是：如何在這些TabItem之一中而不是像以前一樣直接在窗口中顯示應用程序的正常顯示？

我在http://www.wpf-tutorial.com/tabcontrol/using-the-tabcontrol/上遵循的教程僅顯示了如何在Tab內容中顯示簡單文本...

Answer 1

嗯，看來這樣做的方法是使用<StackPanel></StackPanel>

Answer 2

TabItem需要Layout控件之一。 您可以使用Grid StackPanel或Canvas來滿足您的需求

例如

<TabControl>
<TabItem Header="Application">
   <Grid>
      Existing markup goes here...
   </Grid>
</TabItem>