The Order List sample page of UXGridView uses image as the background. The way to implement the page style for your UXWindow should be as simply as put the same image as the background of your UXWindow.

The snippet code below shows how the style is implemented in the page of the sample.

<Border CornerRadius="8">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="1" Opacity="0.75"/>
    </Border.Effect>
    <Border.Background>
        <ImageBrush Stretch="None" AlignmentY="Top" AlignmentX="Right"
                    ImageSource="/Intersoft.ClientUI.Samples.UXGridView;component/Assets/Images/Background/BackgroundOrders.png"/>
    </Border.Background>
</Border>

If you have installed Intersoft WebUI Studio suite on your development PC, the image can be found inside the “C:\Program Files\Intersoft Solutions\Intersoft WebUI Studio 2012 R2\Samples\SL5\cs\ClientUI Samples\Intersoft.ClientUI.Samples.UXGridView\Assets\Images\Background” folder.

I enclosed the image as attachment.

Please feel free to let us know whether this helps or not.

Hi Yudi,

please am back now to the page style tasks and i want your assistance again...

i wanted to integrate that image in my page style but i couldn't this is my page style :

 <Style x:Key="WindowStyle" TargetType="Intersoft:UXWindow"> 
        <!--<Setter Property="ToolTipService.ToolTip" Value="Move"/>-->
        <Setter Property="HeaderTemplate" >
            <Setter.Value>
                <DataTemplate >
                    <Grid x:Name="LayoutRoot">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions >
                            <ColumnDefinition Width="575*" />
                            <ColumnDefinition Width="25"/>
                            <ColumnDefinition Width="25"/>
                        </Grid.ColumnDefinitions>
                        <Intersoft:UXButton x:Name="uXBtnClose" Style="{StaticResource BarBtnCloseStyle}"  Command="Intersoft:WindowCommands.Close" ToolTipService.ToolTip="Close" />
                        <Intersoft:UXButton x:Name="uXBtnMinimise" Style="{StaticResource BarBtnMinimiseStyle}" Command="Intersoft:WindowCommands.Minimize" ToolTipService.ToolTip="Minimize" />
                    </Grid>
                    
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="EnableSystemContextMenu" Value="False"/>
        <Setter Property="HeaderHorizontalAlignment" Value="Right"/>
        <Setter Property="DropShadow">
            <Setter.Value>
                <DropShadowEffect/>
            </Setter.Value>
        </Setter>
        <Setter Property="WindowStartupLocation" Value="Auto"/>
        <Setter Property="Height" Value="380"/>
        <Setter Property="Width" Value="840"></Setter>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="ContentBackground" Value="{StaticResource WindowContentBackgroundColor}"/>
        <Setter Property="ContentBorderBrush" Value="{x:Null}"/>      
        <Setter Property="Foreground" Value="{StaticResource WindowForeground}"/>
        <Setter Property="HeaderForeground" Value="White"/>
        <Setter Property="InnerBackground" Value="{StaticResource WindowInnerBackground}"/>
        <Setter Property="HeaderDisplayMode" Value="Content"/>
        <Setter Property="Background" Value="{StaticResource WindowBackground}"/>
        <Setter Property="InnerBorderBrush" Value="{x:Null}"/>
        <Setter Property="ContentBorderThickness" Value="0"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="CornerRadius" Value="15"/>
        <Setter Property="HeaderMargin" Value="4"/>
        <Setter Property="InnerBorderThickness" Value="0"/>
        <Setter Property="ControlBoxVisibility" Value="Collapsed"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontFamily" Value="Euphemia"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="BusyText" Value="Please Wait"/>
        <Setter Property="Padding" Value="5"/>
        
        
        
    </Style>

where can i put the image please?

thank's in advance

I enclosed a screenshot which shows the Order List sample of UXGridView. Could you please put a mark on the desired style or element which going to be applied on your UXWindow?

I will try to create a sample of UXWindow which implements the style described.

Thank you.

Hi Yudi,

I want to make the "BackGroudOrder.png" (attached in previous post) the default backgroud of my uxwindows. I tried to put that image in the background property but still didn't worked.

I tried to put this code below in my stylePage:

<Setter Property="Background"> 
            <Setter.Value>
                <ImageBrush  ImageSource="/Xspreads.CLientSL;component/Assets/Images/bg_noise.png"/>
            </Setter.Value>
        </Setter>

I want all my uxwindows to be like the uxwindow int this link :

 http://www.intersoftpt.com/Community/Attachments/3677/BackgroundOrders.png

how can i do this ? 

Please try to set the image background on the ContentBackground property of UXWindow. This property gets or sets the brush to apply to the background of the window’s content.

<Setter Property="ContentBackground">
    <Setter.Value>
        <ImageBrush ImageSource="/Assets/Images/AbstractBg.png" Stretch="Fill" Opacity="1" />
    </Setter.Value>
</Setter>

This should helps.

Hi again,

I put the setter as you indicated and this is what i got : attached in "Reult.png" image.

this changed only the background of window content.

in fact, what i want is to have the hole style of the page like the image , e.g: like the http://live.clientui.com/#/UXGridView/Reference/OrdersList uxwindow.

should i delete the header and add my custom close and minimize buttons ? if yes how can i make this happen? if not what do you suggest me ?

Try to add the following style to your UXWindow and hope that this one is close to your requirement (the result can be seen in the attached UXWindowBlack.png).

<Setter Property="InnerBackground">    <Setter.Value>
        <ImageBrush ImageSource="/Assets/Images/BackgroundOrders.png" Stretch="Fill" Opacity="1" />
    </Setter.Value>
</Setter>
<Setter Property="ContentBackground" Value="Black" />
<Setter Property="HeaderForeground" Value="White" />
<Setter Property="Background" Value="Black" />
<Setter Property="InnerBorderThickness" Value="0" />
<Setter Property="ContentBorderBrush" Value="Black" />

The value of InnerBackground property is set to the background image. This property gets or sets the brush to apply to the background of the window’s inner border.

ContentBackground is now set to be Black.

The value of HeaderForeground property is set to be White so that any string which appears in the header element will be visible to the user.

Hope this helps.