Vista - Beginner questions

I've only really just started looking at Avalon... err WPF and I'm having
probablems to do two things that are probably very straight forward. It's
still hard to find ressources on WPF, being unreleased to start with, but
also the technology can be referenced by several names, WPF, Avalon, or
WinFX, so I hope someone here is able to help me.

First, I'd like to know how I can make a ListBox item keep a given aspect
ratio while it's resized in width by a GridSplitter. I need to lay a bitmap
in the background, and I the items need to keep the ratio so the bitmap
always fits perfectly.

The second one is probably even easier. hehe. I want to have a button that
normally shows only the text, while the button part is shown only on hover.
I set the Background to Transparent, as I did for the BorderBrush, but there
is still some kind of shadow border. How can I make it transparent too?

Thanks in advance!

Etienne Boucher

Some suggestions-
To get the ListBox item to resize, try-
<ListBox>
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.Resources>
<Image Source="......" Stretch="Uniform"/>
</ListBox>

As for the Button, you gotta change the Template to get that,
investigate how to do this.

Hi Etienne,

Let me try to answer some of Your questions:
> I've only really just started looking at Avalon... err WPF and I'm having
> probablems to do two things that are probably very straight forward. It's
> still hard to find ressources on WPF, being unreleased to start with, but
> also the technology can be referenced by several names, WPF, Avalon, or
> WinFX, so I hope someone here is able to help me.

So, that is something everybody can realize - not only beginners.
As You know WinFX is the new API for applications in Windows Vista (res.
WindowsXP SP2) which is based on managed code. Windows Presentation
Foundation (WPF) is a subset/part of WinFX. Last but not least 'Avalon'
is considered as the codename of WPF.
Now, I prefer to use the term 'WPF', but if You want to search for
resources on WPF on the internet it might be better to search for
'Avalon' because this was the central (code)name for that technology
during the last years.
I suggest to use the sdk samples, blogs and of course this newsgroup in
order to find resources and to get in contact with other WPF developers.
Blogs offer widespread knowledge to You!

> First, I'd like to know how I can make a ListBox item keep a given aspect
> ratio while it's resized in width by a GridSplitter. I need to lay a bitmap
> in the background, and I the items need to keep the ratio so the bitmap
> always fits perfectly.

Could You please add some more information? Are you working with
ListBoxItem-type or do you only add visuals to the ListBox? If You work
with ListBoxItem it's important to know if your image is a real
'Background' (e.g. an ImageBrush) or whether you put the image as
Content to the ListBoxItem. If You try:

<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

and the Image is real content of the ListBoxItem this will not affect
the image's Height when You resize the ListBox.
If the ListBoxItem has an inital height and the Image is wrapped in an
ImageBrush and set as ListBoxItem.Background the resize will affect the
Image's size! Last but not least You can try to change the template for
ListBoxItem where the ContentPresenter determines Height and Width.

> The second one is probably even easier. hehe. I want to have a button that
> normally shows only the text, while the button part is shown only on hover.
> I set the Background to Transparent, as I did for the BorderBrush, but there
> is still some kind of shadow border. How can I make it transparent too?

This is a candidate for a new button template. Perhaps in Your case it
is possible to make the visuals invisible instead of transparent.

You can go the way of defining a Style encapsulating the template:

<Style x:Key="mySpecialButton" TargetType={x:Type Button}>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType={x:Type Button}>
<!-- define the visual outline here and make it initially
invisible -->

<ControlTemplate.Trigger>
...
<Trigger Property="IsMouseOver" Value="True">
<!-- make button part visible -->
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<!-- make button part invisible -->
</Trigger>
...
</ControlTemplate.Trigger>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


Chris :-)

> Now, I prefer to use the term 'WPF'...

I know the distinction between WPF, Avalon and WinFX, but thanks anyway.
Most XAML found on the Internet is outdated, thus why I hoped for some up to
date help on this group.

> with ListBoxItem it's important to know if your image is a real
> 'Background' (e.g. an ImageBrush) or whether you put the image as Content
> to the ListBoxItem.

I hadn't thought of that, I'll check it. I'd still need to overlay text on
it. What I had in mind was find a better way to do in XAML what I would have
done by handling the SizeChanged event of the ListBox to change the height
of each item everytime the width changed. I played a bit with the Viewbox
too, but it doesn't seem to play well with ListBoxes. It also resizes the
content based on both height and width, which isn't what I'm looking for. I
need the items to resize only based on width.

> This is a candidate for a new button template. Perhaps in Your case it is
> possible to make the visuals invisible instead of transparent.

I think I have a fairly good idea how to define a template, I wanted to know
what is the property I need to change to remove what is left once I made
both the Background and BorderBrush transparent.

However, that prompts another question... If I do that, I need to set it
back to what it was before. Is there any way to reset a property to its
default template value?

Thanks
Etienne Boucher

Hi Etienne,

> Most XAML found on the Internet is outdated, thus why I hoped for some up to
> date help on this group.

Yeah, but sometimes these outdated resources are similar to recent
resources and you only have to transform them by yourself!

> I think I have a fairly good idea how to define a template, I wanted to know
> what is the property I need to change to remove what is left once I made
> both the Background and BorderBrush transparent.

Didn't want to question your skills on templates. Perhaps next time you
should not write 'beginner question'.
What I meant was to use the property 'Visibility'. Each UIElement can
set this property and reflecting to your information of your scenario
this is the property to change on the UIElements which are left. You
shold also consider that making an ui element transparent does affect
the render pass regardless where making an ui element invisible can push
performance.

> However, that prompts another question... If I do that, I need to set it
> back to what it was before. Is there any way to reset a property to its
> default template value?

If you changed the value of a property through a Trigger for example
then you also have to care about setting it back to whatever. There is
no special call to reset a property to its default value. If you want
reset-behavior you can ask the dependency property for its default meta
data and assign it again. This is done in code but I expect this could
work against a consistent programming model. Take a look at
DependencyProperty class for further information.

Merry Christmas
Chris :-)

> What I meant was to use the property 'Visibility'. Each UIElement can set
> this property and reflecting to your information of your scenario this is
> the property to change on the UIElements which are left.

If I change the Button Visibility, the entire button will be hidden. I need
the text to be visible, but not the rest. A flat button if you will. Unless
there's something I don't understand...

> If you want reset-behavior you can ask the dependency property for its
> default meta data and assign it again.

Check. Thanks.

Etienne Boucher
Merry Christmas to you too.

Hi Etienne,

Happy new year :-)

> If I change the Button Visibility, the entire button will be hidden.

That's true. You have to change the Visiblility on UIElements within the
Button template - not for the Button itself. Set the Visibility for
example for the Border which outlines the Button but not for the text
and You'll have what You desire.

Chris