Replace buggy ListBox with ItemsControl+HyperlinkButton, fixes #6

4 files changed, 125 insertions, 156 deletions

diff --git a/Juick/Classes/ScrollViewerMonitor.cs b/Juick/Classes/ScrollViewerMonitor.cs
index 6a65773..a985360 100644
--- a/Juick/Classes/ScrollViewerMonitor.cs
+++ b/Juick/Classes/ScrollViewerMonitor.cs
@@ -37,7 +37,7 @@ namespace Juick.Classes
         {
             var element = (FrameworkElement)sender;
             element.Loaded -= element_Loaded;
-            var scrollViewer = FindChildOfType<ScrollViewer>(element);
+            var scrollViewer = (ScrollViewer)element.Parent;
             if (scrollViewer == null)
             {
                 throw new InvalidOperationException("ScrollViewer not found.");
@@ -59,28 +59,5 @@ namespace Juick.Classes
             var binding = new Binding("VerticalOffset") { Source = scrollViewer };
             listener.Attach(scrollViewer, binding);
         }
-
-        static T FindChildOfType<T>(DependencyObject root)
-            where T : class
-        {
-            var queue = new Queue<DependencyObject>();
-            queue.Enqueue(root);
-
-            while (queue.Count > 0)
-            {
-                var current = queue.Dequeue();
-                for (int i = VisualTreeHelper.GetChildrenCount(current) - 1; 0 <= i; i--)
-                {
-                    var child = VisualTreeHelper.GetChild(current, i);
-                    var typedChild = child as T;
-                    if (typedChild != null)
-                    {
-                        return typedChild;
-                    }
-                    queue.Enqueue(child);
-                }
-            }
-            return null;
-        }
     }
 }
diff --git a/Juick/MainPage.xaml b/Juick/MainPage.xaml
index a06a305..bffd94f 100644
--- a/Juick/MainPage.xaml
+++ b/Juick/MainPage.xaml
@@ -15,26 +15,26 @@
     Foreground="{StaticResource PhoneForegroundBrush}"

     SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait"

     phoneshell:SystemTray.IsVisible="True">

-  <phone:PhoneApplicationPage.Resources>

-    <ResourceDictionary>

-      <bindings:RichTextConverter x:Key="inlineConverter" />

-    </ResourceDictionary>

-  </phone:PhoneApplicationPage.Resources>

-    

+    <phone:PhoneApplicationPage.Resources>

+        <ResourceDictionary>

+            <bindings:RichTextConverter x:Key="inlineConverter" />

+        </ResourceDictionary>

+    </phone:PhoneApplicationPage.Resources>

+

     <!--LayoutRoot is the root grid where all page content is placed-->

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

-      <Grid.RowDefinitions>

-          <RowDefinition Height="Auto" />

-          <RowDefinition Height="*" />

-      </Grid.RowDefinitions>

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

+        <Grid.RowDefinitions>

+            <RowDefinition Height="Auto" />

+            <RowDefinition Height="*" />

+        </Grid.RowDefinitions>

         <phoneshell:SystemTray.ProgressIndicator>

             <phoneshell:ProgressIndicator IsIndeterminate="{Binding IsDataLoading}" 

                                  IsVisible="{Binding IsDataLoading}" 

                                  Text="Loading..." />

         </phoneshell:SystemTray.ProgressIndicator>

         <!--Panorama control-->

-    <!--<controls:Panorama Title="Juick20">-->

-    <!--<controls:Panorama.TitleTemplate>

+        <!--<controls:Panorama Title="Juick20">-->

+        <!--<controls:Panorama.TitleTemplate>

                 <DataTemplate>

                     <Grid Margin="0,80,0,0">

                         <ContentPresenter>

@@ -43,134 +43,137 @@
                     </Grid>

                 </DataTemplate>

             </controls:Panorama.TitleTemplate>-->

-    <controls:Pivot Title="juick" Grid.Row="1">

+        <controls:Pivot Title="juick" Grid.Row="1">

 

-      <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->

-      <!--<controls:PanoramaItem x:Name="MainPanoramaItem" Header="My feed" Margin="0, -40, 0, 0">-->

-      <controls:PivotItem Header="My feed" Margin="0, -5, 0, 0">

+            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->

+            <!--<controls:PanoramaItem x:Name="MainPanoramaItem" Header="My feed" Margin="0, -40, 0, 0">-->

+            <controls:PivotItem Header="My feed" Margin="0, -5, 0, 0">

 

-        <!--Double line list with image placeholder and text wrapping-->

-        <ListBox x:Name="Home"

+                <!--Double line list with image placeholder and text wrapping-->

+                <ScrollViewer>

+                    <ItemsControl x:Name="Home"

                  Margin="0, 0, -12, 0"

                  ItemsSource="{Binding Items}"

-                 SelectionChanged="ListBoxSelectionChanged"

                  bindings:ScrollViewerMonitor.AtEndCommand="{Binding LoadMessagesPageCommand}">

-          <ListBox.ItemContainerStyle>

-            <Style TargetType="ListBoxItem">

-              <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>

-            </Style>

-          </ListBox.ItemContainerStyle>

-          <ListBox.ItemTemplate>

-            <DataTemplate>

-              <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="0 0 0 1">

-                <Grid>

-                  <Grid.ColumnDefinitions>

-                    <ColumnDefinition Width="Auto" />

-                    <ColumnDefinition Width="*" />

-                  </Grid.ColumnDefinitions>

-                  <Grid.RowDefinitions>

-                    <RowDefinition Height="Auto" />

-                    <RowDefinition Height="Auto" />

-                    <RowDefinition Height="Auto" />

-                    <RowDefinition Height="Auto" />

-                  </Grid.RowDefinitions>

-                  <Image Source="{Binding UserAvatar}" Grid.Row="0" Grid.Column="0" Margin="3" />

-                  <TextBlock Text="{Binding Username}" Grid.Row="0" Grid.Column="1"

+                        <ItemsControl.ItemTemplate>

+                            <DataTemplate>

+                                <HyperlinkButton NavigateUri="{Binding MessageUri}">

+                                    <HyperlinkButton.Template>

+                                        <ControlTemplate>

+                                            <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="0 0 0 1">

+                                                <Grid>

+                                                    <Grid.ColumnDefinitions>

+                                                        <ColumnDefinition Width="Auto" />

+                                                        <ColumnDefinition Width="*" />

+                                                    </Grid.ColumnDefinitions>

+                                                    <Grid.RowDefinitions>

+                                                        <RowDefinition Height="Auto" />

+                                                        <RowDefinition Height="Auto" />

+                                                        <RowDefinition Height="Auto" />

+                                                        <RowDefinition Height="Auto" />

+                                                    </Grid.RowDefinitions>

+                                                    <Image Source="{Binding UserAvatar}" Grid.Row="0" Grid.Column="0" Margin="3" />

+                                                    <TextBlock Text="{Binding Username}" Grid.Row="0" Grid.Column="1"

                      Margin="5,0,5,5" VerticalAlignment="Top"

                      HorizontalAlignment="Left"

                      FontFamily="{StaticResource PhoneFontFamilySemiLight}"

                      FontSize="{StaticResource PhoneFontSizeLarge}"

                      Style="{StaticResource PhoneTextAccentStyle}" />

-                  <!--Style="{StaticResource PhoneTextNormalStyle}"-->

-                  <RichTextBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

+                                                    <!--Style="{StaticResource PhoneTextNormalStyle}"-->

+                                                    <RichTextBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

                                TextWrapping="Wrap" HorizontalAlignment="Left"

                                Foreground="{StaticResource PhoneForegroundBrush}"

                                Margin="5,0,5,5" VerticalAlignment="Top"

                                IsReadOnly="True">

-                    <Paragraph bindings:ParagraphBindingBehavior.AssignedInlines="{Binding MessageText, Converter={StaticResource inlineConverter}}" />

-                  </RichTextBox>

-                  <Image Source="{Binding Attachment}" Grid.Row="2" Grid.Column="0" Margin="3" Grid.ColumnSpan="2" />

-                  <TextBlock Text="{Binding Status}" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"

+                                                        <Paragraph bindings:ParagraphBindingBehavior.AssignedInlines="{Binding MessageText, Converter={StaticResource inlineConverter}}" />

+                                                    </RichTextBox>

+                                                    <Image Source="{Binding Attachment}" Grid.Row="2" Grid.Column="0" Margin="3" Grid.ColumnSpan="2" />

+                                                    <TextBlock Text="{Binding Status}" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"

                      Foreground="{StaticResource PhoneForegroundBrush}"

                      Style="{StaticResource PhoneTextAccentStyle}"

                      FontSize="{StaticResource PhoneFontSizeSmall}"

                      Margin="5,0,5,5" VerticalAlignment="Top"

                      TextWrapping="Wrap" HorizontalAlignment="Left"/>

-                </Grid>

-              </Border>

-            </DataTemplate>

-          </ListBox.ItemTemplate>

-        </ListBox>

-        <!--</controls:PanoramaItem>-->

-      </controls:PivotItem>

-

-      <!--<controls:PanoramaItem x:Name="LastPanoramaItem" Header="Last" Margin="0, -40, 0, 0">-->

-      <controls:PivotItem Header="Last" Margin="0, -5, 0, 0">

-        <!--Double line list with image placeholder and text wrapping-->

-        <ListBox x:Name="Last" Margin="0,0,-12,0"

+                                                </Grid>

+                                            </Border>

+                                        </ControlTemplate>

+                                    </HyperlinkButton.Template>

+                                </HyperlinkButton>

+                            </DataTemplate>

+                        </ItemsControl.ItemTemplate>

+                    </ItemsControl>

+                </ScrollViewer>

+                <!--</controls:PanoramaItem>-->

+            </controls:PivotItem>

+            <!--<controls:PanoramaItem x:Name="LastPanoramaItem" Header="Last" Margin="0, -40, 0, 0">-->

+            <controls:PivotItem Header="Last" Margin="0, -5, 0, 0">

+                <!--Double line list with image placeholder and text wrapping-->

+                <ScrollViewer>

+                    <ItemsControl x:Name="Last" Margin="0,0,-12,0"

                  ItemsSource="{Binding Items}"

-                 SelectionChanged="LastBoxSelectionChanged"

                  bindings:ScrollViewerMonitor.AtEndCommand="{Binding LoadMessagesPageCommand}">

-          <ListBox.ItemContainerStyle>

-            <Style TargetType="ListBoxItem">

-              <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>

-            </Style>

-          </ListBox.ItemContainerStyle>

-          <ListBox.ItemTemplate>

-            <DataTemplate>

-              <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="0 0 0 1">

-                <Grid>

-                  <Grid.ColumnDefinitions>

-                    <ColumnDefinition Width="Auto" />

-                    <ColumnDefinition Width="*" />

-                  </Grid.ColumnDefinitions>

-                  <Grid.RowDefinitions>

-                    <RowDefinition Height="Auto" />

-                    <RowDefinition Height="Auto" />

-                    <RowDefinition Height="Auto" />

-                    <RowDefinition Height="Auto" />

-                  </Grid.RowDefinitions>

-                  <Image Source="{Binding UserAvatar}" Grid.Row="0" Grid.Column="0" Margin="3" />

-                  <TextBlock Text="{Binding Username}" Grid.Row="0" Grid.Column="1"

+                        <ItemsControl.ItemTemplate>

+                            <DataTemplate>

+                                <HyperlinkButton NavigateUri="{Binding MessageUri}">

+                                    <HyperlinkButton.Template>

+                                        <ControlTemplate>

+                                            <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="0 0 0 1">

+                                                <Grid>

+                                                    <Grid.ColumnDefinitions>

+                                                        <ColumnDefinition Width="Auto" />

+                                                        <ColumnDefinition Width="*" />

+                                                    </Grid.ColumnDefinitions>

+                                                    <Grid.RowDefinitions>

+                                                        <RowDefinition Height="Auto" />

+                                                        <RowDefinition Height="Auto" />

+                                                        <RowDefinition Height="Auto" />

+                                                        <RowDefinition Height="Auto" />

+                                                    </Grid.RowDefinitions>

+                                                    <Image Source="{Binding UserAvatar}" Grid.Row="0" Grid.Column="0" Margin="3" />

+                                                    <TextBlock Text="{Binding Username}" Grid.Row="0" Grid.Column="1"

                      Margin="5,0,5,5" VerticalAlignment="Top"

                      HorizontalAlignment="Left"

                      FontFamily="{StaticResource PhoneFontFamilySemiLight}"

                      FontSize="{StaticResource PhoneFontSizeLarge}"

                      Style="{StaticResource PhoneTextAccentStyle}" />

-                  <RichTextBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

+                                                    <RichTextBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

                                TextWrapping="Wrap" HorizontalAlignment="Left"

                                Foreground="{StaticResource PhoneForegroundBrush}"

                                Margin="5,0,5,5" VerticalAlignment="Top"

                                IsReadOnly="True">

-                    <Paragraph bindings:ParagraphBindingBehavior.AssignedInlines="{Binding MessageText, Converter={StaticResource inlineConverter}}" />

-                  </RichTextBox>

-                  <Image Source="{Binding Attachment}" Grid.Row="2" Grid.Column="0" Margin="3" Grid.ColumnSpan="2" />

-                  <TextBlock Text="{Binding Status}" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"

+                                                        <Paragraph bindings:ParagraphBindingBehavior.AssignedInlines="{Binding MessageText, Converter={StaticResource inlineConverter}}" />

+                                                    </RichTextBox>

+                                                    <Image Source="{Binding Attachment}" Grid.Row="2" Grid.Column="0" Margin="3" Grid.ColumnSpan="2" />

+                                                    <TextBlock Text="{Binding Status}" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"

                      Foreground="{StaticResource PhoneForegroundBrush}"

                      Style="{StaticResource PhoneTextAccentStyle}"

                      FontSize="{StaticResource PhoneFontSizeSmall}"

                      Margin="5,0,5,5" VerticalAlignment="Top"

                      TextWrapping="Wrap" HorizontalAlignment="Left"/>

-                </Grid>

-              </Border>

-            </DataTemplate>

-          </ListBox.ItemTemplate>

-        </ListBox>

-        <!--</controls:PanoramaItem>-->

-      </controls:PivotItem>

-      <!--</controls:Panorama>-->

-    </controls:Pivot>

-  </Grid>

+                                                </Grid>

+                                            </Border>

+                                        </ControlTemplate>

+                                    </HyperlinkButton.Template>

+                                </HyperlinkButton>

+                            </DataTemplate>

+                        </ItemsControl.ItemTemplate>

+                    </ItemsControl>

+                </ScrollViewer>

+                <!--</controls:PanoramaItem>-->

+            </controls:PivotItem>

+            <!--</controls:Panorama>-->

+        </controls:Pivot>

+    </Grid>

     <phone:PhoneApplicationPage.ApplicationBar>

-    <phoneshell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

-      <phoneshell:ApplicationBarIconButton IconUri="/Images/appbar.feature.email.rest.png" Text="New post" Click="ApplicationBarIconButtonClick1"/>

-      <phoneshell:ApplicationBarIconButton IconUri="/Images/appbar.refresh.rest.png" Text="Refresh" Click="ApplicationBarIconButtonClick" />

+        <phoneshell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

+            <phoneshell:ApplicationBarIconButton IconUri="/Images/appbar.feature.email.rest.png" Text="New post" Click="ApplicationBarIconButtonClick1"/>

+            <phoneshell:ApplicationBarIconButton IconUri="/Images/appbar.refresh.rest.png" Text="Refresh" Click="ApplicationBarIconButtonClick" />

 

-      <phoneshell:ApplicationBar.MenuItems>

-        <phoneshell:ApplicationBarMenuItem Text="New message" Click="ApplicationBarIconButtonClick1"/>

-        <phoneshell:ApplicationBarMenuItem Text="Refresh" Click="ApplicationBarIconButtonClick"/>

-        <phoneshell:ApplicationBarMenuItem Text="Sign out" Click="ApplicationBarMenuItemClick" />

-      </phoneshell:ApplicationBar.MenuItems>

-    </phoneshell:ApplicationBar>

-  </phone:PhoneApplicationPage.ApplicationBar>

+            <phoneshell:ApplicationBar.MenuItems>

+                <phoneshell:ApplicationBarMenuItem Text="New message" Click="ApplicationBarIconButtonClick1"/>

+                <phoneshell:ApplicationBarMenuItem Text="Refresh" Click="ApplicationBarIconButtonClick"/>

+                <phoneshell:ApplicationBarMenuItem Text="Sign out" Click="ApplicationBarMenuItemClick" />

+            </phoneshell:ApplicationBar.MenuItems>

+        </phoneshell:ApplicationBar>

+    </phone:PhoneApplicationPage.ApplicationBar>

 </phone:PhoneApplicationPage>
\ No newline at end of file
diff --git a/Juick/MainPage.xaml.cs b/Juick/MainPage.xaml.cs
index 8296b18..d6b0b08 100644
--- a/Juick/MainPage.xaml.cs
+++ b/Juick/MainPage.xaml.cs
@@ -159,32 +159,6 @@ namespace Juick
                     );

         }

 

-        private void ListBoxSelectionChanged(object sender, SelectionChangedEventArgs e)

-        {

-            // If selected index is -1 (no selection) do nothing

-            if (((ListBox)sender).SelectedIndex == -1)

-                return;

-

-            // Navigate to the new page

-            NavigationService.Navigate(new Uri("/ThreadView.xaml?mid=" + App.MyFeedView.Items[((ListBox)sender).SelectedIndex].MID, UriKind.Relative));

-

-            // Reset selected index to -1 (no selection)

-            ((ListBox)sender).SelectedIndex = -1;

-        }

-

-        private void LastBoxSelectionChanged(object sender, SelectionChangedEventArgs e)

-        {

-            // If selected index is -1 (no selection) do nothing

-            if (((ListBox)sender).SelectedIndex == -1)

-                return;

-

-            // Navigate to the new page

-            NavigationService.Navigate(new Uri(string.Format("/ThreadView.xaml?mid={0}", App.LastView.Items[((ListBox)sender).SelectedIndex].MID), UriKind.Relative));

-

-            // Reset selected index to -1 (no selection)

-            ((ListBox)sender).SelectedIndex = -1;

-        }

-

         private void ApplicationBarIconButtonClick(object sender, EventArgs e)

         {

             App.MyFeedView.Items.Clear();

diff --git a/Juick/ViewModels/MessageViewModel.cs b/Juick/ViewModels/MessageViewModel.cs
index e120c5d..460df38 100644
--- a/Juick/ViewModels/MessageViewModel.cs
+++ b/Juick/ViewModels/MessageViewModel.cs
@@ -17,6 +17,7 @@ namespace Juick.ViewModels
         public MessageViewModel(Message message)

         {

             MID = message.Mid;

+            MessageUri = string.Format("/ThreadView.xaml?mid={0}", MID);

             RID = message.Rid;

             Username = message.User.UName;

             MessageText = HttpUtility.HtmlDecode(message.Body);

@@ -138,6 +139,8 @@ namespace Juick.ViewModels
         }

 

         private string _status;

+        

+

         /// <summary>

         /// Sample _viewModelBase property; this property is used in the view to display its value using a Binding.

         /// </summary>

@@ -158,6 +161,18 @@ namespace Juick.ViewModels
             }

         }

 

+        private string _messageUri;

+

+        public string MessageUri

+        {

+            get { return _messageUri; }

+            set

+            {

+                _messageUri = value;

+                NotifyPropertyChanged("MessageUri");

+            }

+        }

+

         public event PropertyChangedEventHandler PropertyChanged;

 

         public void NotifyPropertyChanged(String propertyName)