Reorder Icon mission (the two up and down arrows)

[schneeflocke]

Hi,

I created a new project with an DataBoundListBox based on the new Telerik Templates ("Thumbnail List 05") . I enabled the reorder functionality (IsItemReorderEnabled="True").
If I now run the project, and tap on an item the two reorder circles appear but without an icon within. That means the reorder functionality works perfect but the required icons are missing.

Two white circle are appearing but without the up or down arrow in there.

It's a normal project with de-DE as Project language.

Thanks

Stefan

[Deyan]

Hello Stefan,

The problem with the images comes from an issue in the Windows Phone OS. This issue is similar to the one with the Application Bar and loading buttons with images in it: the images should be put in the application project in order to be accessible. I am attaching here the images that we are using in our Demo. You can use the approach we use there to load them: with a style. Take a look at the Item Reorder example of RadDataBoundListBox and let me know if you need further assistance with it.

Kind regards,
Deyan
the Telerik team

[schneeflocke]

Sorry, doesn't work. Placed the two images in my project but where is the correct place to store the files?

Take a look at the Item Reorder example of RadDataBoundListBox and let me know if you need further assistance with it.

Hi, can't find the example you say. Please provide me a link to the example. Nothing found in the online documentation, nothing in the the blogs and nothing in the template sample app.

Thanks

Stefan

[Deyan]

Hello Stefan,

You can put the images wherever you want in your application's project.

As for the Telerik Demos app: it is installed with the MSI package that you have downloaded from our website to install RadControls for Windows Phone. You can find a shortcut to the Visual Studio solution on your Desktop or in the Start menu folder of Telerik. After opening the solution, take a look at the Examples_WP folder and find the DataBoundListBox folder. There you will find the ItemReorder.xaml file which represents the Item Reorder example. You will see the styles we use to apply these images.

I am pasting them here:

<Style x:Key="ShiftUpButtonStyle"  TargetType="telerikPrimitives:RadImageButton">
    <Setter Property="Width" Value="54"/>
    <Setter Property="Height" Value="54"/>
    <Setter Property="BorderThickness" Value="3"/>
    <Setter Property="Margin" Value="0, 0, 24, 24"/>
    <Setter Property="ButtonShape" Value="Ellipse"/>
    <Setter Property="RestStateImageSource" Value="DataBoundListBox/Images/Reorder/ReorderButtonArrowD
    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
</Style>

<Style x:Key="ShiftDownButtonStyle"  TargetType="telerikPrimitives:RadImageButton">
    <Setter Property="Width" Value="54"/>
    <Setter Property="Height" Value="54"/>
    <Setter Property="BorderThickness" Value="3"/>
    <Setter Property="Margin" Value="0, 0, 24, 24"/>
    <Setter Property="ButtonShape" Value="Ellipse"/>
    <Setter Property="RestStateImageSource" Value="DataBoundListBox/Images/Reorder/ReorderButtonArrowU
    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
</Style>

<telerikPrimitives:RadDataBoundListBox.ItemReorderControlStyle>
    <Style TargetType="telerikListBox:ItemReorderControl">
        <Setter Property="ShiftUpButtonStyle" Value="{StaticResource ShiftUpButtonStyle}"/>
        <Setter Property="ShiftDownButtonStyle" Value="{StaticResource ShiftDownButtonStyle}"/>
    </Style>
</telerikPrimitives:RadDataBoundListBox.ItemReorderControlStyle>

Note that you will have to adjust the paths to the images according to where they are in your project. Their build action should also be set to 'Content'.

Let me know in case you need further assistance with this.

Regards,
Deyan
the Telerik team

[schneeflocke]

Hi,

set the path to the correct place and the build action to content. But no icons appear. Below my xaml.

<phone:PhoneApplicationPage
    x:Class="RadControlsWindowsPhoneApp2_2del.RadControlsItem1"
    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:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikListBox="clr-namespace:Telerik.Windows.Controls.DataBoundListBox;assembly=Telerik.Windows.Controls.Primitives"

    d:DataContext="{d:DesignData SampleData/MainDataViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="728" d:DesignWidth="480"
    shell:SystemTray.IsVisible="False">

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.Resources>
            <Style TargetType="telerikPrimitives:ItemCheckBox" x:Key="DataBoundListBoxCheckBoxStyle">
                <Setter Property="VerticalAlignment" Value="Center"/>
            </Style>
            <DataTemplate x:Key="DataBoundListBoxItemTemplate">
                <Grid Margin="0,0,0,12">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Image Width="99" Height="99" Source="{Binding ImageThumbnailSource}"/>
                    <StackPanel Margin="12,-14,0,0" Grid.Column="1">
                        <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Text="{Binding Title}" TextWrapping="Wrap"/>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding Information}" TextWrapping="Wrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock x:Name="PageTitle" Text="page title" Margin="18,36,0,4" Style="{StaticResource PhoneTextTitle1Style}"/>

        <Image Grid.Row="1" Width="480" Height="136" Stretch="Fill" Source="Images/TitleImage.png"/>

        <Grid Grid.Row="2" Margin="12,36,12,0">
            <Grid.Resources>
                <Style x:Key="ShiftUpButtonStyle"  TargetType="telerikPrimitives:RadImageButton">
                    <Setter Property="Width" Value="54"/>
                    <Setter Property="Height" Value="54"/>
                    <Setter Property="BorderThickness" Value="3"/>
                    <Setter Property="Margin" Value="0, 0, 24, 24"/>
                    <Setter Property="ButtonShape" Value="Ellipse"/>
                    <Setter Property="RestStateImageSource" Value="/Images/ReorderButtonArrowDown.png"/>
                    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
                </Style>

                <Style x:Key="ShiftDownButtonStyle"  TargetType="telerikPrimitives:RadImageButton">
                    <Setter Property="Width" Value="54"/>
                    <Setter Property="Height" Value="54"/>
                    <Setter Property="BorderThickness" Value="3"/>
                    <Setter Property="Margin" Value="0, 0, 24, 24"/>
                    <Setter Property="ButtonShape" Value="Ellipse"/>
                    <Setter Property="RestStateImageSource" Value="/Images/ReorderButtonArrowUp.png"/>
                    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
                </Style>
            </Grid.Resources>
            <telerikPrimitives:RadDataBoundListBox Margin="-12,12,12,0"
                                                   x:Name="DataBoundListBox"
                                                   ItemsSource="{Binding Items}"
                                                   IsCheckModeEnabled="True"
                                                   IsItemReorderEnabled="True"
                                                   CheckBoxStyle="{StaticResource DataBoundListBoxCheckBoxStyle}"
                                                   ItemTemplate="{StaticResource DataBoundListBoxItemTemplate}">
                <telerikPrimitives:RadDataBoundListBox.ItemReorderControlStyle>
                    <Style TargetType="telerikListBox:ItemReorderControl">
                        <Setter Property="ShiftUpButtonStyle" Value="{StaticResource ShiftUpButtonStyle}"/>
                        <Setter Property="ShiftDownButtonStyle" Value="{StaticResource ShiftDownButtonStyle}"/>
                    </Style>
                </telerikPrimitives:RadDataBoundListBox.ItemReorderControlStyle>
            </telerikPrimitives:RadDataBoundListBox>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/Select.png" Click="ApplicationBarIconButton_Click" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button3.png" Text="Button 3"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button4.png" Text="Button 4"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

[Deyan]

Hi Stefan,

The attached project works as expected on my side with our latest assemblies.

Can you please check it out and see whether it also works on your side?

Thanks for your time.

Regards,
Deyan
the Telerik team

[schneeflocke]

Hi Deyan,

sorry, the project dosn't work. To get it just simply running I added the missing ViewModelBase.cs.

but the Icons are still missing if I run your sample project.

So on your side the sample works, and on my side it dosn't. The difference is
- I added the ViewModelBase.cs
- reference to Telerik.Windows.Core
- reference to Telerik.Windows.Controls.Primitives

I'm using : Telerik.Windows.Core Version 2012.2.607.2040 and Telerik.Windows.Controls.Primitives Version 2012.2.607.2040.

Any Idea?

Thanks

Stefan

[Lancelot]

Hi Sefan,

I have solved your problem  When I first loaded Deyan's example project, I had the same issue as you. However, I was able to fix the problem with the images by changing the format of the uri resource. Depending on your project's environment, your URIs require different format.

Basically in the Style, the up and down buttons were looking for the image at "/Images/*********.png", if you remove the forward slash in the uri and do this instead  "Images/****.png" your icons will load.

I've attached an image to help you locate the spot you need to change it in. The image below is a screenshot of Page1.xaml in Deyan's example project.

Good Luck!
Lancelot

[Deyan]

Hi Stefan,

Can you please try Lance's suggestions and let us know whether they help you resolve the case?

Thanks for your time.

All the best,
Deyan
the Telerik team