XAML- adding content to tabbed window

Question

I am working on an application that has been written in C#- the main display of the application has been written/ created using XAML markup in Visual Studio, and the application performs all of its current features as desired.

My intention is to embed a web browser within the application, to allow the user to interact with a particular website from directly inside the application.

To do this, I want to create a 'tabbed' display inside the application, where the first tab will display the application as it currently stands, and allow the user to interact with it in the same way as it currently does; the second tab will display the website to the user inside the application window, allowing the user to interact with the website in the same way they would from within a web browser.

The xml in the .xaml file that is displaying the application as it currently stands is as follows:

<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>

I am now trying to edit that XML to display two tabs- one with the application as it stands, and the second displaying a website.

What I am unsure of though, is once I've added a <TabControl></TabControl> tag, how do I then display the current markup (for the application as it currently stands) inside a <TabItem></TabItem> tag?

I have tried writing the following, underneath the closing </Menu> tag:

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

However, when I do this, the first line of the existing markup seems fine, but the rest of it is underlined (indicating that there is a compile error). The error message that's displayed when I hover the cursor over it is

The property 'Content' is set more than once.

So, my question is: How do I display the normal display of my application inside one of these TabItem s rather than directly inside the window, as I was doing previously?

The tutorial that I was following at http://www.wpf-tutorial.com/tabcontrol/using-the-tabcontrol/ only shows how to display simple text in the content of a Tab ...

Answer 1

嗯，看来这样做的方法是使用<StackPanel></StackPanel>

Answer 2

TabItem expects one of the Layout controls. You could use a Grid StackPanel or Canvas to suit your needs

eg

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