This easiest solution is to just grab the chat window and DDS files from the mod in your screenshot, but I'm going to assume you want to know how to code this yourself.
Any background with a texture or gradiant will ultimately be a reference to one or more DDS files. For resizable windows, this is typically a reference to a RectangleStyle which references one or more ImageStyles, which in turn reference an ImageFrame.
ImageFrames define a rectangle within a DDS file to be used. You provide the ImageStyle with a path to the DDS file and cords for the upper left and lower right corners of the rectangle (or image slice). This is the most basic way to place images into the UI. You must define an ImageFrame even if you're using the entire DDS file as 1 image.
ImageStyles are used to make an ImageFrame reusable by name rather than specifying the DDS file and cords every time you want to use the image. It also allows the game to run more efficiantly by only loading the image into memory once. Other styles that make use of images generally must refer to an ImageStyle not the ImageFrame directly.
RectangleStyles make use of multiple ImageStyles to create rectangles that tile and/or stretch those images to fill the space. In most cases, the background of a resizable window will reference a RectangleStyle.
The default chat window uses a simple solid black background. The object can be found at root.MainHUD.MainChat.WindowFrame.Bkg. To change the background to a tileable image, you're going to need to give it an RStyleDefault reference to a RectangleStyle. If you're unfamiliar with how to create the styles needed for this, you might want to look at the Bkg object in the Acheivments window. Note you can double-click references in UIBuilder to jump to that object. You will probably need to...
1) Get a copy of the desired background graphic (DDS file).
2) Create a new ImageFrame (in XML) for that DDS file.
3) Create an ImageStyle so its reusable.
4) Create a RectangleStyle so the image tiles and/or stretches when resized.
5) Plug the name of that RectangleStyle in as the Bkg object's RStyleDefault value.
|