如何在Windows Phone 8中访问UserControl的组件/元素

Question

I had developed UserControl for my windows phone 8 which is as follows.

<UserControl x:Class="SpinrWindowsMobile.UserControls.ProgressiveLongListSelector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <phone:LongListSelector Grid.Row="0"  Name="longlistselector">
        </phone:LongListSelector>
        <StackPanel Grid.Row="1">
            <ProgressBar Name="listProress" IsIndeterminate="True"></ProgressBar>
            <TextBlock Name="ProgressText" Text="Loading..."></TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

As you can see in above xaml I had used LongListSelector and the StackPanel inside Grid Control. I am using this control in my MainPage.xaml which is as follows.

<phone:PhoneApplicationPage
    x:Class="SpinrWindowsMobile.MainPage"
    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:UserControls="clr-namespace:SpinrWindowsMobile.UserControls"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">     
            <UserControls:ProgressiveLongListSelector>

            </UserControls:ProgressiveLongListSelector>

     </Grid>    
</phone:PhoneApplicationPage>

Upto this it is fine but I want to do something which is as follows.

  <UserControls:ProgressiveLongListSelector>
                  <UserControls:ProgressiveLongListSelector.longlistselector 
                 ItemsSource="Binding" ItemTemplate="{staticresource myTemplate}">
                  </UserControls:ProgressiveLongListSelector.longlistselector>
    </UserControls:ProgressiveLongListSelector>

How Can I access the longlistselector which is an element/component of UserControl ? Benefit of this is I can directly set the LongListSelector Properties in the xaml(in which i am embedding My usercontrol) itself . For me this kind of stuff is day today requirement.

can anyone guide me how to do this?

Answer 1

Since you are extending and modifying LongListSelector, I would recommend subclassing and retemplating LongListSelector instead of placing it inside a UserControl. That will allow you to access all the existing properties and methods on LongListSelector, and use your new ProgressiveLongListSelector exactly like you would a LongListSelector.

To start, you can create a new class that subclasses LongListSelector:

public class ProgressiveLongListSelector : LongListSelector {

    public ProgressiveLongListSelector() {
        DefaultStyleKey = typeof(ProgressiveLongListSelector);
    }
}

Note the DefaultStyleKey . That's where the new control template will come from.

Now you can place the following style in your App.xaml resources. Note that the TargetType is ProgressiveLongListSelector . This is how DefaultStyleKey will find your new default style.

    <Style TargetType="phoneApp2:ProgressiveLongListSelector">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="phoneApp2:ProgressiveLongListSelector">
                    <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ScrollStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="00:00:00.5" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Scrolling">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="NotScrolling" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" />
                            <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="4,0,4,0" Opacity="0" Orientation="Vertical" />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This style / template is a copy of the default LongListSelector template (extracted from Blend). From here, you can add the other elements in your UserControl, such as the ProgressBar and TextBlock, to the template.

Answer 2

What you could do is to expose properties of your UserContorl using DependencyProperty mechanism. Then you can set them in XAML, from the Page's which are using that UserControl. I'm not sure if you want to expose all the bits of your VisualTree, since this could change in future. But you can expose some properties which affect your UserControl's behavior indirectly.

Here's an example how this can be done:

(this example is taken from my code, but I guess you can figure out how to adapt it)

First you declare a DependencyProperty in your UserControl:

public partial class MyUserControl : UserControl
{
    public bool IsEditingMode
    {
        get { return (bool)GetValue(IsEditingModeProperty); }
        set { SetValue(IsEditingModeProperty, value); }
    }

    public static readonly DependencyProperty IsEditingModeProperty =
        DependencyProperty.Register("IsEditingMode", typeof(bool), typeof(MyUserControl), new PropertyMetadata(false, IsEditingModeChanged));
}

private static void IsEditingModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    // this will be called when someone would set the exposed property to some new value
}

Next you add MyUserControl to some Page and set that property:

<phone:PivotItem Header="{Binding Path=LocalizedResources.MyPivotHeader, Source={StaticResource LocalizedStrings}}" Margin="0">
    <my:MyUserControl x:Name="People" IsEditingMode="True"/>
</phone:PivotItem>

Notice how IsEditingMode is set in XAML. Of course, you could also set it from the code, using the public bool IsEditingMode property wrapper around the IsEditingModeProperty .