Re: WrapPanel Bound To Collection - WPF Discussion Boards

Mycroft Holmes24-Mar-11 12:46

24-Mar-11 12:46

Kevin Marois wrote:
the content comes out as text

I found gettig the location of the images was the most finnicky requirement. This loads a horizontal wrap panel with images and caption, url comes from the database, images are stored locally.

<ItemsControl Grid.Row="1" ItemsSource="{Binding ShipList}" HorizontalAlignment="Center">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <HyperlinkButton Click="HyperlinkButton_Click" Tag="{Binding Path=ShipID}" HorizontalContentAlignment="Center" >
                <Grid HorizontalAlignment="Center" >
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" Stretch="None" Source="{Binding Path=ShipLogoUri}" />
                    <TextBlock Grid.Row="1" Foreground="Blue" Text="{Binding Path=Ship}" HorizontalAlignment="Center" />
                </Grid>
            </HyperlinkButton>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Not sure if that is what you are after!

Never underestimate the power of human stupidity
RAH

Kevin Marois24-Mar-11 12:57

24-Mar-11 12:57

Perfect! Thank you

Everything makes sense in someone's mind

Kevin Marois24-Mar-11 13:29

24-Mar-11 13:29

Ok, this works great. The buttons all appear in the WrapPanel with text & images as they should, except for 2 issues:

1) I'm using telerik:RadRadioButtons. They're not acting like radio buttons now. ie - I can select one, all, or some.
2) The Command binding isn't working. Clicking the button does not get a response:

I think these problems are the result of the fact the list is dynamic and populatd at runtime. Any thoghts?

Here's the XAML:

<ItemsControl Grid.Row="1" 
                Grid.Column="0"
                Margin="10"
                ItemsSource="{Binding TemplateTypes}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <telerik:RadRadioButton Command="{Binding SelectedTemplate}" 
                                    HorizontalContentAlignment="Center" 
                                    Height="175"
                                    Width="120">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" 
                            Stretch="Fill"
                            Height="64"
                            Width="64"
                            Source="{Binding Path=ImageFile}" />
                    <TextBlock Grid.Row="1" 
                                Text="{Binding Path=Caption}" 
                                HorizontalAlignment="Center" 
                                TextWrapping="Wrap"/>
                </Grid>
            </telerik:RadRadioButton>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

And the code behind:

public class mv_FileNewViewModel : _ViewModelBase
{
    #region Properties
    private ObservableCollection<MenuButtonData> _TemplateTypes = new ObservableCollection<MenuButtonData>();
    public ObservableCollection<MenuButtonData> TemplateTypes
    {
        get { return _TemplateTypes; }
        set
        {
            if (_TemplateTypes != value)
            {
                _TemplateTypes = value;
                RaisePropertyChanged("TemplateTypes");
            }
        }
    }
    #endregion

    #region Command Properties
    private ICommand _SelectedTemplate;
    public ICommand SelectedTemplate
    {
        get
        {
            if (_SelectedTemplate == null)
                _SelectedTemplate = new RelayCommand(SelectedTemplateExecuted, SelectedTemplateCanExecute);

            return _SelectedTemplate;
        }
    }
    #endregion

    #region Command Handlers
    public bool SelectedTemplateCanExecute()
    {
        return true;
    }
    public void SelectedTemplateExecuted()
    {
        // THIS SHOULD FIRE WHEN A BUTTON IS CLICKED 
    }
    #endregion

    #region Private Methods
    private void loadTemplateTypes()
    {
        TemplateTypes.Add(new MenuButtonData { Caption = "Presentations", ImageFile = @"C:\Users\kmarois\Documents\My Dropbox\Raptor\Raptor\Media\Graphics\presentation_64x64.png" });
        TemplateTypes.Add(new MenuButtonData { Caption = "Slides", ImageFile = @"C:\Users\kmarois\Documents\My Dropbox\Raptor\Raptor\Media\Graphics\slide_48x52.png" });
        TemplateTypes.Add(new MenuButtonData { Caption = "Controls", ImageFile = @"C:\Users\kmarois\Documents\My Dropbox\Raptor\Raptor\Media\Graphics\control_72x72.png" });
        TemplateTypes.Add(new MenuButtonData { Caption = "Templates", ImageFile = @"C:\Users\kmarois\Documents\My Dropbox\Raptor\Raptor\Media\Graphics\template_32x32.png" });
        TemplateTypes.Add(new MenuButtonData { Caption = "Themes", ImageFile = @"C:\Users\kmarois\Documents\My Dropbox\Raptor\Raptor\Media\Graphics\theme_64x64.png" });
    }
    #endregion
}

Everything makes sense in someone's mind

SledgeHammer0124-Mar-11 14:06

24-Mar-11 14:06

It should work, unless:

1) your DataContext is not set right
2) telerik radio buttons are not using the Command interface and just using the Click event or something

Does the telerik radio button use the command when its just plopped on a form? If you use a real WPF radio button does the command handler get called?

In regards to your other issue of the radio buttons not being grouped, with the standard WPF radio buttons, you have to specifically set the group name for them to work like you expect. Its not done by tab order like in MFC anymore Smile | :)

. So I'd expect you have to set the group name on the telerik ones as well.

Kevin Marois24-Mar-11 14:25

24-Mar-11 14:25

Well, setting the groupname solved the issue of them not acting like radio buttons.

Before I implemented this template, I had the telerik:RadRadioButtons defined explicitly in the XAML, and the command was working, as was the grouping without setting the group name. So given that, I know the DC is set right.

So, I'm still not getting the Command to work right at this point.

Everything makes sense in someone's mind

SledgeHammer0124-Mar-11 15:10

24-Mar-11 15:10

Oh duh... I must have been smoking crack earlier...

You are inside of the DataTemplate, so {Binding} is pointing to your item, not the VM. In this case, its MenuButtonData.

Now, you wanted to be like the cool kids and use MVVM Smile | :)

, so you made your life a lot more difficult because you can't use RelativeSource / FindAncestor to get to where the property is.

I guess you could make the command a static property and refer to it that way, but then how would the static handler get to your VM?

Or you could try use RelativeSource / FindAncestor to get to your view if it has a reference to the ViewModel and then access the property through there. However that wouldn't be proper MVVM.

Your other option (which is what I do in my code) is to subscribe to the ItemContainerGenerator messages and when the container is generated for each item, use FindName to get to the RadioButton and hook up the command then.

The simplest way is to have the command in your view, but that ain't the best MVVM and it wouldn't really jive with your VM.

Its messy any way you do it.

SledgeHammer0124-Mar-11 15:13

24-Mar-11 15:13

Another idea I just had was that you can add a ref to the command inside of your MenuButtonData class and then you can use simple {Binding} in your DataTemplate and your MVVM wouldn't be broken.

You *would* have a random reference to a random command in a random place, but your other options are a lot messier.

And actually, maybe a command reference inside of MenuButtonData isn't so random...

Mycroft Holmes24-Mar-11 15:50

Re: WrapPanel Bound To Collection [modified]

24-Mar-11 15:50

This may be a really dumb response (I have not used radio buttons in SL yet, let alone Teleriks) but can't you add an IsChecked property to your observablecollection and track the change event on the list?

Never underestimate the power of human stupidity
RAH

Kim Breugelmans24-Mar-11 20:19

Kim Breugelmans

24-Mar-11 20:19

Try your binding like this:

<telerik:RadRadioButton Command="{Binding DataContext.SelectedTemplate, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"
                        HorizontalContentAlignment="Center"
                        Height="175"
                        Width="120">

The DataContext of the items in your itemscontrol get set on the bound item, so you have to reference your itemscontrol as source.

modified on Friday, March 25, 2011 2:26 AM

Kevin Marois25-Mar-11 5:43

25-Mar-11 5:43

That did it. Thank you!!!

The only question now is how to determine which RadioButton was clicked?

Everything makes sense in someone's mind

SledgeHammer0125-Mar-11 6:32

25-Mar-11 6:32

Its not in sender, OriginalSource, etc? That'll just get you the RadioButton though. I'm thinking one step ahead of you here... you aren't interested in which RadioButton was clicked, you are interested in which MenuItemData was selected, right? In that case, just use CommandParameter={Binding} to pass your MenuItemData into your command handler.

Kevin Marois25-Mar-11 7:07

25-Mar-11 7:07

Ok, here's the XAML:

<telerik:RadRadioButton Command="{Binding DataContext.SelectedTemplate,
                            RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"                        
                        CommandParameter="{Binding}"
                        HorizontalContentAlignment="Center"                        
                        Height="175"                        
                        Width="120"
                        GroupName="TemplateButtons">

and here's the C#:

private ICommand _SelectedTemplate;
public ICommand SelectedTemplate
{
    get
    {
        if (_SelectedTemplate == null)
            _SelectedTemplate = new RelayCommand(SelectedTemplateExecuted, SelectedTemplateCanExecute);

        return _SelectedTemplate;
    }
}

public bool SelectedTemplateCanExecute()
{
    return true;
}
public void SelectedTemplateExecuted()
{
    loadView(InnerViews.Presentations);
}

How/where is the MenuItemData reference passed?

Everything makes sense in someone's mind

Ok Everyone, Here It Is

Kevin Marois25-Mar-11 7:31

25-Mar-11 7:31

This now works.

First the XAML:

<telerik:RadRadioButton Command="{Binding DataContext.SelectedTemplate, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"                        
                        CommandParameter="{Binding Path=DataContext, RelativeSource={RelativeSource Self}}"
                        HorizontalContentAlignment="Center"                        
                        Height="175"                        
                        Width="120"
                        GroupName="TemplateButtons">

Now the code behind:

private ICommand _SelectedTemplate;
public ICommand SelectedTemplate
{
    get
    {
        if (_SelectedTemplate == null)
            _SelectedTemplate = new RelayCommand<MenuButtonData>(SelectedTemplateExecuted, SelectedTemplateCanExecute);

        return _SelectedTemplate;
    }
}
public bool SelectedTemplateCanExecute(object Parameter)
{
    return true;
}
public void SelectedTemplateExecuted(object Parameter)
{
            
}

Adding the Type qualifier to the RelayCommand and setting up the CanExecute and Executed methods to receive the parameter is what did it. Now, when a radiobutton is clicked, it's bound data item is passed to the command methods.

Many thanks to all of you.

Everything makes sense in someone's mind

Kim Breugelmans25-Mar-11 7:04

Kim Breugelmans

25-Mar-11 7:04

my colleague at work has some helper class for it, but I'm not at work anymore so can't look at it right now...
but I think he has a generic wrapper class Option<t> with an IsSelected property
So maybe you could try to add an IsSelected property to your MenuButtonData class and bind it to your
IsSelected of your radio button?
This is just guessing as I don't even know the RadRadioButton control.
Would CommandParameter={Binding} return the control or DataContext?
Wouldn't it need to be CommandParameter={Binding Path=DataContext, RelativeSource={RelativeSource Self}} to return the MenuButtonData?
Again just guessing, don't even have VS at home Wink | ;-)

SledgeHammer0125-Mar-11 9:30

WPF binding to a simple CLR Property? (Visibility=Collapsed)

25-Mar-11 9:30

Thats kind of a slick way to get to the VM. I'll have to remember that.

devvvy23-Mar-11 16:23

devvvy

23-Mar-11 16:23

Hi
I have trouble getting WPF binding to a simple CLR Property to work (Visibility=Collapsed)

<Button Name="btnSomeCmd" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="3" Click="btnSomeCmd_Click" Width="25px" Height="25px" Visibility="{Binding Path=IsSomeCmdVisible}" >

public partial class SomeUserControl : UserControl
{
...
public Visibility IsSomeCmdVisible
{
get { return Visibility.Collapsed; }
}
...
}

sigh, WPF makes it so hard to get simple things work. (I got it working with dependency property but simple CLR... anyone please write an article on this)

dev

Re: WPF binding to a simple CLR Property? (Visibility=Collapsed)

devvvy23-Mar-11 19:42

devvvy

23-Mar-11 19:42

God damn, got it:

<UserControl x:Class="..."
x:Name="BasicConfigCtrl"
...
Visibility="{Binding Path=IsSomeCmdVisible, ElementName=BasicConfigCtrl, Mode=OneWay}"
...

ElementName references UserControl's x:Name tag.

dev

Re: WPF binding to a simple CLR Property? (Visibility=Collapsed)

Pete O'Hanlon23-Mar-11 23:03

Pete O'Hanlon

23-Mar-11 23:03

The easy way to do this is to have a boolean condition (depending on the effect you are trying to achieve), and then use a value converter. Have a quick google for BooleanToVisibilityConverter[^] to find out more about it.

I'm not a stalker, I just know things. Oh by the way, you're out of milk.

Forgive your enemies - it messes with their heads

My blog | My articles | MoXAML PowerToys | Onyx

Book - Silverlight 4 - Problem Design Solution

arkiboys23-Mar-11 2:41

arkiboys

23-Mar-11 2:41

Hi,
I bought this book recently and going through the chapters...
Question:
I am unable to login when running the solution in chapter 4.
Has anyone had the same issue please?
Thanks

Re: Book - Silverlight 4 - Problem Design Solution

Mycroft Holmes23-Mar-11 12:20

Re: Book - Silverlight 4 - Problem Design Solution

23-Mar-11 12:20

That is one of the most obscure question I have run across.

You expect someone to guess the book (or do you think there is only 1 book on Silverlight/WPF). Who the hell knows what is in chapter 4 of your mystery book!

You presumably have the source code for the project and can therefore debug it and work it out!

Never underestimate the power of human stupidity
RAH

arkiboys23-Mar-11 22:31

arkiboys

23-Mar-11 22:31

Hi,
Thanks for replying...
Please note that the name of the book is in the subject.

Regards

Re: Book - Silverlight 4 - Problem Design Solution

Mycroft Holmes23-Mar-11 23:01