Not binding a command in List footer?

Nov 5, 2011 at 1:39 PM

Hi there,

I like your project very much and now I am trying to use it in my new project, but I found something is strange when I tried to bind a command to a button in a  list footer.

Is it an issue or did I do something wrong?

<DataTemplate x:Key="HomeTimelineFooterTemplate">
            <Grid Margin="12,12,12,96">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Content="上一页" 
                            Command="{Binding PrevPage}"
                            BorderThickness="0"
                            Background="{StaticResource PhoneAccentBrush}" 
                            FontSize="{StaticResource PhoneFontSizeSmall}" 
                            FontFamily="{StaticResource PhoneFontFamilySemiLight}" />
                    <Button Content="下一页" 
                            Command="{Binding NextPage}"
                            BorderThickness="0"
                            Background="{StaticResource PhoneAccentBrush}" 
                            FontSize="{StaticResource PhoneFontSizeSmall}" 
                            FontFamily="{StaticResource PhoneFontFamilySemiLight}">
                    </Button>
                </StackPanel>
            </Grid>
        </DataTemplate>
public HomeTimelineViewModel()
        {
            Count = 20;
            Feature = 0;
            Page = 1;
            var allMode = ReactivePropertyMode.DistinctUntilChanged | ReactivePropertyMode.RaiseLatestValueOnSubscribe;
            Error = new ReactiveProperty<string>();
            
            StatusList = new ReactiveProperty<IEnumerable<WeiboStatus>>();
            MaxId = new ReactiveProperty<long>(0, allMode);
            GetHomeTimeline();
            NextPage = MaxId.Select(x => x > 0).ToReactiveCommand();
            NextPage.Subscribe(x => NextPageTimeline());
        }
Coordinator
Nov 5, 2011 at 4:50 PM

Thank you for being interested.
Please ask me a question steadily.

By the way, where is the strange point?
I think this sample works, I see.

Please write a concrete strange point and a small (so as I paste it, and to just work) sample.

Nov 6, 2011 at 2:07 AM
Edited Nov 6, 2011 at 4:05 AM

Sorry, I did not make the question clear, but I am now using telerik controls (DataBoundList) in my example, but I found the controls inside the data template sometimes do not work, the command binding doest not work (I set the break point in the beginning of NextPageTimeline in the view model, but the debugger never break there). the full main view code is as follows

 

<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:rad="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives" 
    xmlns:edc="clr-namespace:Microsoft.Expression.Controls;assembly=Microsoft.Expression.Drawing"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:prism="clr-namespace:Microsoft.Practices.Prism.Interactivity;assembly=Microsoft.Practices.Prism.Interactivity"
    x:Class="Wulong.Phone.WannaSay.Views.MainPage"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="HomeTimelineFooterTemplate">
            <Grid Margin="12,12,12,96">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Content="上一页" 
                            Command="{Binding PrevPage}"
                            BorderThickness="0"
                            Background="{StaticResource PhoneAccentBrush}" 
                            FontSize="{StaticResource PhoneFontSizeSmall}" 
                            FontFamily="{StaticResource PhoneFontFamilySemiLight}" />
                    <Button Content="下一页" 
                            Command="{Binding NextPage}"
                            BorderThickness="0"
                            Background="{StaticResource PhoneAccentBrush}" 
                            FontSize="{StaticResource PhoneFontSizeSmall}" 
                            FontFamily="{StaticResource PhoneFontFamilySemiLight}">
                    </Button>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="HomeTimelineDataTemplate">
            <Grid Margin="1" x:Name="TemplateLayoutRoot">
                <Grid.Triggers>
                    <EventTrigger>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="TemplateLayoutRoot" 
                                    Storyboard.TargetProperty="Opacity" 
                                    From="0" 
                                    To="1" 
                                    Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image 
                    Grid.Column="0"
                        VerticalAlignment="Top"
                        Margin="24,12,0,0" >
                    <Image.Source>
                        <BitmapImage UriSource="{Binding User.ProfileImageUrl}" 
                                     CreateOptions="BackgroundCreation"/>
                    </Image.Source>
                </Image>
                <StackPanel Margin="0" VerticalAlignment="Top" Grid.Column="1">
                    <TextBlock 
                                TextWrapping="Wrap" 
                                VerticalAlignment="Top"
                                Text="{Binding User.ScreenName}" 
                                Style="{StaticResource PhoneTextAccentStyle}" />
                    <TextBlock
                                TextWrapping="Wrap" 
                                Text="{Binding Text}" 
                                Style="{StaticResource PhoneTextNormalStyle}"/>
                    <edc:Callout 
                                HorizontalAlignment="Left"
                                AnchorPoint="1,1" 
                                CalloutStyle="RoundedRectangle"
                                Stroke="Black"
                                Margin="12,0,12,0"
                                Fill="{StaticResource PhoneChromeBrush}">
                        <TextBlock
                                    TextWrapping="Wrap"
                                    Text="{Binding RetweetedStatus.Text}"
                                    Style="{StaticResource PhoneTextSubtleStyle}" 
                                    />
                    </edc:Callout>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Margin="12,0,0,12"
                                    TextWrapping="Wrap" 
                                    Text="{Binding CreatedAt, Converter={StaticResource RelativeTimeConverter}}"
                                    Style="{StaticResource PhoneTextSmallStyle}" />
                        <TextBlock TextWrapping="Wrap"
                                    Margin="12,0,0,12"
                                    Text="发自"
                                    Style="{StaticResource PhoneTextSmallStyle}" />
                        <TextBlock Margin="12,0,0,12"
                                    TextWrapping="Wrap"
                                    Text="{Binding SourceAsText}"
                                    Style="{StaticResource PhoneTextSmallStyle}" />
                    </StackPanel>
                </StackPanel>
            </Grid>
            
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
    

    <phone:PhoneApplicationPage.FontFamily>
        <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
    </phone:PhoneApplicationPage.FontFamily>
    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>
    

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" d:DataContext="{d:DesignData /SampleData/HomeTimelineModelSampleData.xaml}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" 
                    Grid.Row="0" 
                    Margin="12,12,12,28">
            <TextBlock x:Name="ApplicationTitle" 
                       Style="{StaticResource PhoneTextNormalStyle}" 
                       Text="想说"
                       Margin="0,12,0,0"/>
            <TextBlock x:Name="PageTitle"
                       Margin="12,0,0,0" 
                       Style="{StaticResource PhoneTextTitle2Style}" 
                       Text="首页"/>
        </StackPanel>
        <Grid x:Name="ContentPanel" Grid.Row="1">
            <rad:RadDataBoundListBox x:Name="homeTimeline"
                ItemTemplate="{StaticResource HomeTimelineDataTemplate}" 
                ItemsSource="{Binding StatusList.Value}"
                CacheMode="BitmapCache"
                ListFooterTemplate="{StaticResource HomeTimelineFooterTemplate}"
                EmptyContent="正在加载数据"
                />
        </Grid>
        
    </Grid>
</phone:PhoneApplicationPage>


Coordinator
Nov 6, 2011 at 4:41 PM

I do not have control of Teleric, I cannot advise it precisely.
However, this minimum cord works.

<!-- HomeTimelineFooterTemplate is same as your example -->
<Grid x:Name="LayoutRoot" Background="Transparent" >
    <ListBox Name="TestList" ItemTemplate="{StaticResource HomeTimelineFooterTemplate}" />
</Grid>

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        TestList.ItemsSource = Enumerable.Repeat(new HomeTimelineViewModel(), 1);
    }
}

public class HomeTimelineViewModel
{
    public ReactiveProperty<long> MaxId { get; private set; }
    public ReactiveCommand NextPage { get; private set; }

    public HomeTimelineViewModel()
    {
        var allMode = ReactivePropertyMode.DistinctUntilChanged | ReactivePropertyMode.RaiseLatestValueOnSubscribe;
        MaxId = new ReactiveProperty<long>(0, allMode);

        NextPage = MaxId.Select(x => x > 0).ToReactiveCommand();
        NextPage.Subscribe(x => MessageBox.Show("SHOW"));

        // I recommend execution is after setup
        GetHomeTimeline();
    }

    void GetHomeTimeline()
    {
        // change value after 5 seconds(simulate network latency...)
        Scheduler.ThreadPool.Schedule(() =>
        {
            MaxId.Value = 10;
        }, TimeSpan.FromSeconds(5));
    }
}
 
Does the value of MaxId change? (exec GetHomeTimeline or others)
Please put break point of the debugger in "x => x > 0" of MaxId.Select(x = x 0), and confirm it.

And I think a other factor, is binding of the RadDataBoundListBox and ICommand failed?

Nov 8, 2011 at 12:15 AM
Edited Nov 8, 2011 at 2:37 AM

Thanks for the information, I just switched to built-in Listbox and everything is ok now. I will find out the reason why it won't work in telerik controls later. By the way have you implemented a wrapper for INavigationService in your mvvm framwork or any recommended way to naviagte to another page in view model?

Br

-Peng

Nov 8, 2011 at 4:35 AM
wpcfan wrote:

Thanks for the information, I just switched to built-in Listbox and everything is ok now. I will find out the reason why it won't work in telerik controls later. By the way have you implemented a wrapper for INavigationService in your mvvm framwork or any recommended way to naviagte to another page in view model?

Br

-Peng


 I just found some code in samples, so referencing PhoneApplicatioFrame is the recommended way, right?PhoneApplicationFrame

Coordinator
Nov 8, 2011 at 6:15 PM

PhoneApplicationFrame is one of the answer.
But I'm not thinking it is best way.
It is necessary to think about some kind of better way.