XAML centering assistance

Started by Aubrey, April 09, 2014, 07:38:59 AM

Previous topic - Next topic

Aubrey

I am trying to center 2 lines of text on the bottom of my image.
The second line of text is left aligned with the first (which is centered)
I would like to have both blocks of text independently centered. (See my setup and result in the attachments)

I tried this syntax first (I want the title larger, the second line uses font defined in the Text Overlay window)
<Run FontSize='28pt'>Light Festival Dubai, 28th. March 2014</Run>
Photograph by Aubrey O'Callaghan © 2014

and then reading around the XAML subject on the web (I cannot find info on variable line text positioning in the IMatch Manual)
<Run FontSize='28pt'>Light Festival Dubai, 28th. March 2014</Run>
<TextBlock TextAlignment="Center">Photograph by Aubrey O'Callaghan © 2014</TextBlock>

But this does not work.

Suggestions?

Thanks,
Aubrey.

[attachment deleted by admin]

Mario

You have set the text alignment to Left, which contradicts your attempt on centering.
Remove the separate <TextBlock> and instead set the text alignment to center. This will center the entire markup block.
What do you get then?

Tip: Always include your text overlay text / markup in your post so users can just copy them and try it out. I had to copy your examples yesterday from your screen shots for my tests, and this is time consuming and prone to errors. Better you do a quick Ctrl+C, Ctrl+V on your side.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

Aubrey

#2
See result of center. It still does not work (the text alignment "Left" I previously sent was when I was experimenting)
The<LineBreak/> was removed as I was getting an extra empty line between the two lines. The </Run> appears to have the effect of a single line increment.

[I have just noticed that your example in another thread showing how to use multiple lines in one overlay  (https://www.photools.com/community/index.php?topic=2081.0) shows an extra space between each line when the <LineBreak/> command is used]

My workaround to center second line  is to insert   a number of times

Aubrey.

<Run FontSize='28pt'>Light Festival Dubai, 28th. March 2014</Run>
Photograph by Aubrey O'Callaghan © 2014

[attachment deleted by admin]

Mario

Use Line1<LineBreak/>Line 2
to prevent extra empty lines.

For your center problem, try this:

<StackPanel>
  <TextBlock Cursor="Hand" VerticalAlignment="Center" HorizontalAlignment="Center">Line 1</TextBlock>
  <TextBlock Cursor="Hand" VerticalAlignment="Center" HorizontalAlignment="Center">Line 2</TextBlock>
</StackPanel>
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

Aubrey

Mario,
with the command <StackPanel>  nothing appears.
On removal of StackPanel> </StackPanel> then I get text, however everything is left aligned.
I understand the need for StackPanel, I looked at tutorial: http://wpftutorial.net/StackPanel.html

I added the tutorial example:
<StackPanel>
  <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
  <Button Margin="10">Black</Button>
  <Button Margin="10">With milk</Button>
  <Button Margin="10">Latte machiato</Button>
  <Button Margin="10">Chappuchino</Button>
</StackPanel>

Again nothing with <StackPanel>, but without it, got output, but all text left aligned in buttons.

I'm going to read more details on WPF 4.5.

In the meantime: Should there be special software installed on PC to fully read XAML?

Don't lose time on this, I will investigate further and then come back.

Aubrey.

Mario

#5
QuoteI'm going to read more details on WPF 4.5.
IMatch implements a sub-set of XAML. <StackPanel> unfortunately cannot be used in the Batch Processor because the Batch Processor wraps the text you enter in a <TextBlock> already. StackPanel cannot be nested in a <TextBlock>, and <TextBlock> can be neither.

If your text wraps, it will be centered. If you force a line break, the lines will be flush left, but the resulting text block will be centered. I see currently no way to implement what you want - except two separate text overlays with bottom alignment, and then positioning the second text overlay with a bottom margin > 0 above the other overlay. The number of pixels depends on the font size you use and how much space you want between the two overlays.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

Aubrey

Mario,
OK! Thanks for the feedback/follow-up, I did an amount of experimenting without success.
I'll use the workaround, inserting   a number of times.

Aubrey.

Mario

#7
Inserting non-breaking spaces can work, if you don't change the text or font.

I would always prefer two text overlays because it's more flexible.

Both overlays are vertically aligned to the bottom and horizontally centered.
Overlay 2 (the copyright line) uses a bottom margin of 10 pixel.
Overlay 1 (the description) uses a bottom margin of 40 pixel to set it on top of overlay 1.
The 40 pixel measure varies, depending on how large the copyright font is and how much room you want between the two lines.




[attachment deleted by admin]
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

Aubrey

Mario,
Absolutely perfect!
I had not thought about using the outer margin bottom.

A feature request was submitted to set up text processing with respect to the bottom of the canvas, (which started this discussion,) in fact this was already in place! We have spent a lot of time in ever decreasing circles reaching the right conclusion.

Perhaps add more details to the help file regarding "Outer Margin" in text overlays is required. (By the way, not sure how "Inner margin" would work).

Thank you again for your dedication in helping a single user reach a satisfactory solution.
Aubrey.

Mario

Quote(By the way, not sure how "Inner margin" would work).

Just try it. It allows you to control the distance of the text from the outer borders of your text area.
Set a background color for your text overlay. This allows you to "see" the outer margins and inner margins.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook