Is there an easy way to have formatted tab captions in XUL? I want to have a specific part of the tab caption in bold font.
No easy way. XUL <tab>'s text is in a <label>, which doesn't give you fine-grained control over parts of the text. You'd have to replace it with a <description> which can contain HTML markup, but this is not a standard thing to do.
An easier way perhaps is to put multiple <label>'s inside the <tab>
Eg :
<tabbox>
<tabs>
<tab>
<label style="margin-right: 0px;" value="normal"/>
<label style="margin-left: 0px; font-weight: bold;" value="bold"/>
</tab>
</tabs>
</tabbox>
Of course it depends on what it's used for exactly.
Related
How do I place an image inside a text paragraph, so that the image is inline with text in XAML?
Here's an HTML equivalent of what I want to achieve:
<p>Your collection of things does not contain any items. Add a new
item by pressing <img src="add.png"> button and choosing the
options that you like lorem ipsum etc.</p>
I could put a TextBlock and an Image inside of a Grid and position the Image using margins, but this is very fragile, because the image would have to be repositioned manually every time text size, text length or width of the container changes. It would be better to have the image flow with the text, like in the HTML example above.
You should use RichTextBox to put images inline with a text
<RichTextBox>
<Paragraph>
Displaying text with inline image
<InlineUIContainer>
<Image Source="add.png" Height="50" Width="50" />
</InlineUIContainer>
</Paragraph>
</RichTextBox>
Below is code for my button, so what properties should I add to make button invisible but content must be visible.
<Button x:Name="PART_PreviousButton"
DockPanel.Dock="Left"
Content="<"
Focusable="False"
Opacity="0" />
You need to edit the button Template to have this kind of result.
This link explains it pretty well, the easiest way is to do it with blend: http://msdn.microsoft.com/en-us/library/bb613598.aspx
Basically I have an image in my application that I want to add hover text (or tool tip) too. This is easy to do using the ToolTipService.ToolTip attribute on the Image tag. The problem I have is that I require some words in the text to have a font-weight of bold.
i.e. This is a test tooltip.
My image tag looks something like this:
<Image Name="HelpIcon" Height="16" Width="16" Source="component/Assets/help.png" Stretch="Uniform" ToolTipService.ToolTip="This is a test tooltip.">
So given this example, how do I make the word test appear bold in the tooltip?
For the tooltip to have rich content you need to define the ToolTip contents as FrameworkElements rather than text.
<Image Source="component/Assets/help.png">
<ToolTipService.ToolTip>
<TextBlock>
This is a <Bold>test</Bold> tooltip.
</TextBlock>
</ToolTipService.ToolTip>
</Image>
Is there an easier way to center a label in Xul then with the following?
<xul:hbox>
<xul:spacer flex="1" />
<xul:label id="myLabel" value="LABEL"/>
<xul:spacer flex="1" />
</xul:hbox>
Yes. Use box packing via the pack attribute.
<hbox pack="center"><label id="myLabel" value="LABEL"/></hbox.
Two alternative ways which also work with multiline labels:
Use <label style="text-align: center"/>
Use <vbox align="center"><label/></vbox>
I'm working on creating an XUL app right now and I'm stuck with a few problems at this point. My current file is here: http://projects.thecloudonline.net/gemxul/regrid.xul.
I want that second column to essentially "float: right" (like how CSS works on webpages). The red background shows me that part moved, but my content is stuck oriented left. How can I make the content go along with it?
Secondly, my overall goal is to get it so that the layout is essentially split in half. Setting maxwidth="50%" on the first column doesn't seem to do anything. Is that the correct approach, or am I way off there?
That's all for now!
This should work :
<grid style="border: #000000 solid 1px;">
<columns>
<column style="border-right: #666666 solid 1px;"/>
<column flex="1"/>
<column style="background-color:red;"/>
</columns>
<rows>
<row>
<vbox>
<label value="Launcher 1" id="l1_title"/>
<button label="button" id="l1_btn" />
<label value="This is a description for item 1." id="l1_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 2" id="l2_title"/>
<button label="button" id="l2_btn"/>
<label value="This is a description for item 2." id="l2_desc"/>
</vbox>
</row>
<row style="border-top: #666666 solid 1px;">
<vbox>
<label value="Launcher 3" id="l3_title"/>
<button label="button" id="l3_btn"/>
<label value="This is a description for item 3." id="l3_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 4" id="l4_title"/>
<button label="button" id="l4_btn"/>
<label value="This is a description for item 4." id="l4_desc"/>
</vbox>
</row>
</rows>
</grid>
There are several ways of doing this. Personally I wouldn't use grid for something like this. vbox and hbox in combination beats anything you would normally do in tables. But of course it depends entirely what your end goal is.