本文的目標

使用配置xml實現下面的結果

佈局

整體採用水平佈局，左邊顯示文字區域設定為垂直佈局。

lets go

stage 1

建立一個空白窗體，並設定為半透明；同時，使得整個視窗可以移動，則 將caption填充整個視窗。程式碼如下

<?xml version="1.0" encoding="UTF-8"?>
<Window size="600,400" caption="0,0,0,400" shadowattached="false"  roundcorner="4,4" >
    <HBox bkcolor="bk_lightcolor_trans_50" height="stretch" width="stretch" >
    </HBox>
</Window>
 

其中，bk_lightcolor_trans_50的定義如下

<TextColor name="bk_lightcolor_trans_50" value="#9f101010" />

此時，效果如下（半透明視窗）

stage 2

• 右側顯示圖片，用VBox代替，載一張圖。
• xml的程式碼如下

<?xml version="1.0" encoding="UTF-8"?>
<Window size="1280,620" caption="0,0,0,620" shadowattached="false"  >
    <HBox bkcolor="bk_lightcolor_trans_50" height="stretch" width="stretch" >
        
        <!--中間左邊顯示文字部分-->
        <VBox height="auto" width="889"  >
        </VBox>

        <!--右側顯示圖片區域-->
        <VBox class="bk_image_diamond_419x637"/>
    </HBox>
</Window>
 

• 效果如下

![](https://img2020.cnblogs.com/blog/1630599/202012/1630599-20201213181059199-216792349.png)

其中，bk_image_diamond_419x637的定義如下

 <Class name="bk_image_diamond_419x637" width="419" height="647" bkimage="../bk_image/bk_diamond.png"/>

stage 3

• 配置左側顯示文字，使用垂直佈局VBox承載3個控制元件（從上到下）：title label、subtitle label 和 內容richedit。

為什麼內容不用label? 沒有找到label可以設定換行顯示的屬性配置。如果您知道如何配置Label多行顯示和自動換行，歡迎留言交流。

• xml程式碼如下

<?xml version="1.0" encoding="UTF-8"?>
<Window size="1280,620" caption="0,0,0,620" shadowattached="false"  >
    <HBox bkcolor="bk_lightcolor_trans_50" height="stretch" width="stretch" >
        
        <!--中間左邊顯示文字部分-->
        <VBox height="auto" width="889"  >
            <Label class="label_tittle" text="GTA線上模式" margin="10,10,10,10" />
            <Label class="label_subtitle" text="本週展臺載具：貝飛特斯特林 GT" margin="10,5,5,5" />
            <RichEdit class="label_content" text="速訪名鑽假日賭場大廳轉動幸運輪盤，即有機會帶走GTA遊戲幣、聲望值、服裝和各種神祕獎品。本週站臺載具是貝飛特斯特林 GT，這是一款德國經典之作，其引擎蓋下的強勁馬力足以把您嚇得瞬間邁入中年危機。" 
                    multiline="true" 
                    readonly="true" 
                    margin="10,10,10,10" 
                    width="stretch" 
                    height="90"/>            
        </VBox>

        <!--右側顯示圖片區域-->
        <VBox class="bk_image_diamond_419x637"/>
    </HBox>
</Window>

其中，label_tittle、label_subtitle、label_content的定義如下

<Class name="label_tittle" font="system_60" normaltextcolor="white"/>
<Class name="label_subtitle" font="system_30" normaltextcolor="white"/>
<Class name="label_content" font="system_23"  normaltextcolor="white"/>

而system_60和system_30和system_23定義如下：

<Font id="system_60" name="system" size="60"/>
<Font id="system_30" name="system" size="30"/>
<Font id="system_23" name="system" size="23"/>

其中，white的定義如下：

<TextColor name="white" value="#ffffffff"/>

• 效果如下
  

目標效果