we are developing an in-house Windows 10 app for time tracking. We are not extremely familiar with it but have it almost built. The question is how do we change the content of a single selected item inside a gridview.
XAML code
<Page
x:Class="xxxxx.AllJobs"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxxxx"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="gridAllJobs" Background="White">
<GridView x:Name="gridViewJobs" Margin="5,120,0,0" Grid.Column="1" Background="LightGray">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="JobPanel" Orientation="Vertical" Background="White" Margin="10,10,0,0" Tapped="JobPanel_Tapped">
<local:DefaultContent/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Jobs" VerticalAlignment="Top" Height="63" Width="124" FontSize="48"/>
<TextBlock x:Name="lblTime" Margin="0,10,10,0" TextWrapping="Wrap" Text="8:00:00" FontSize="36" FontWeight="Bold" TextAlignment="Right" Padding="2,2,2,0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="174" Height="50"/>
<TextBlock x:Name="txtEmployee" HorizontalAlignment="Right" Margin="0,67,10,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="48" Width="223" FontSize="24" TextAlignment="Right" Padding="2"/>
<Image x:Name="imgClockOut" HorizontalAlignment="Right" Height="115" Margin="0,0,238,0" VerticalAlignment="Top" Width="115" Source="Assets/clockout.png" Tapped="imgClockOut_Tapped"/>
</Grid>
</Page>
When the user selects an individual job, we want the to be replaced with another resource (or maybe there is a better way to do this). But just for that one job.
DefaultConent is a usercontrol
<UserControl
x:Class="xxxxx.DefaultContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxxxx"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150"
d:DesignWidth="400">
<StackPanel x:Name="OuterPanel" Orientation="Horizontal" Background="White" Margin="20,0,0,0">
<StackPanel x:Name="LeftPanel" Margin="5" Width="225">
<TextBlock x:Name="txtProdID" Text="{Binding ModuleID}" FontSize="24" FontWeight="Bold" Foreground="DarkBlue" Padding="2" FontFamily="Microsoft JhengHei"/>
<TextBlock x:Name="txtJobID" Text="{Binding JobID}" Padding="2" FontSize="10"/>
<TextBlock Text="{Binding ItemID}" Padding="2" FontWeight="Bold" FontFamily="Microsoft JhengHei" FontSize="20"/>
<TextBlock Text="{Binding ProductName}" Padding="2" FontSize="12" TextWrapping="WrapWholeWords"/>
</StackPanel>
<StackPanel x:Name="DividerPanel" Margin="0,10,0,10" Background="LightGray" Width="1"/>
<StackPanel x:Name="RightPanel" Orientation="Vertical" Width="95" Margin="20,5,20,10">
<TextBlock Text="{Binding CalcQty}" TextAlignment="Right" Padding="2" FontSize="24"/>
<TextBlock Text="{Binding OprID}" TextAlignment="Right" VerticalAlignment="Bottom" Padding="2,38,2,2"/>
</StackPanel>
<StackPanel x:Name="JobStatus">
<local:NotStarted/>
</StackPanel>
</StackPanel>
</UserControl>
And we want to replace that content with buttons. We are completely open to any ideas. We may be going about this completely wrong. I'm sure it is something simple and we just cannot find the answer.
Thanks in advance.
Update.
I've been able to bind a new property on click. When I add this property as a text block, it does update on the click. However, the "Setter" does not seem to be doing anything. The value of my text changes. But the properties of the panel are not changing.
<StackPanel x:Name="LeftPanel" Margin="5" Width="225">
<TextBlock x:Name="txtProdID" Text="{Binding ModuleID}" FontSize="24" FontWeight="Bold" Foreground="DarkBlue" Padding="2" FontFamily="Microsoft JhengHei"/>
<TextBlock x:Name="txtJobID" Text="{Binding JobID}" Padding="2" FontSize="10"/>
<TextBlock Text="{Binding ItemID}" Padding="2" FontWeight="Bold" FontFamily="Microsoft JhengHei" FontSize="20"/>
<TextBlock Text="{Binding ProductName}" Padding="2" FontSize="12" TextWrapping="WrapWholeWords"/>
<TextBlock Text="{Binding IsClicked}" Padding="2" FontSize="12" TextWrapping="WrapWholeWords"/>
</StackPanel>
<StackPanel x:Name="DividerPanel" Margin="0,10,0,10" Background="LightGray" Width="1"/>
<StackPanel x:Name="RightPanel" Orientation="Vertical" Width="95" Margin="20,5,20,10">
<TextBlock Text="{Binding CalcQty}" TextAlignment="Right" Padding="2" FontSize="24"/>
<TextBlock Text="{Binding OprID}" TextAlignment="Right" VerticalAlignment="Bottom" Padding="2,38,2,2"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<StateTrigger x:Name="CurrItem" IsActive="{Binding Path=IsClicked}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LeftPanel.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
Several reasons why your UI isn't updating.
You can apply a mode to your binding may force the data back.
But more importantly, are you implementing the the INotifyPropertyChanged interface, this allows the updated property to be sent back to the ui as it updates.
To do this add the interface of : INotifyPropertyChanged to your class housing your data that needs updated, then it will prompt for you to add your implementation.
Then update your properties to hit the property back.
Example:
public class DemoCustomer : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
//NotifyPropertyChanged
// This method is called by the Set accessor of each property.
// The CallerMemberName attribute that is applied to the optional propertyName
// parameter causes the property name of the caller to be substituted as an argument.
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
//Property:
public string CustomerName
{
get
{
return this.customerNameValue;
}
set
{
if (value != this.customerNameValue)
{
this.customerNameValue = value;
NotifyPropertyChanged();
}
}
}
}
Referenced example from: https://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged(v=vs.110).aspx
Related
I have a WPF application with one window. In that window I have several StackPanels and several Buttons. White can find each Button perfectly, but with exact the same code just one single Button is seldom found and often not found. I was unable to find out what the cause is for this behaviour. Thats why I came to you guys.
Note: Before the buttons are shown, there is another view (in the same window) that waits for the server to respond. As soon as the response is in, the buttons get displayed.
Here my testcode:
[TestMethod]
public void ClickBarPayment_ViewExchanges()
{
DelayedStart(5);
Application app = null;
try
{
app = Application.Launch(SutPath);
try
{
var window = app.GetWindow("CfeMain");
var button = (Button)window.Get(SearchCriteria.ByAutomationId("CashButton"), TimeSpan.FromSeconds(60));
button.Click();
Assert.AreEqual(false, button.Visible);
}
catch (Exception e)
{
Assert.Fail(e.Message);
}
}
finally
{
app?.Close();
}
}
You can assume, that the Buttons are all equal and all have a Tag " Name="" ". Here is the XAML code, I remove unnecessary names with "Blabla" a.s.o.
<StackPanel Name="PaymentContent" Visibility="Visible" VerticalAlignment="Center" Margin="0,0,0,0">
<StackPanel Height="60" VerticalAlignment="top" Margin="20,0,10,0">
<TextBlock FontSize="24" Foreground="#0b0b0b" Name="info" HorizontalAlignment="Stretch">Bla</TextBlock>
</StackPanel>
<StackPanel Name="options" Orientation="Vertical" HorizontalAlignment="Center" Grid.RowSpan="2" Width="1004">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,15,5,0">
...
...
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,0,5,5">
<Button Name="Blablabla" Click="Blablabl_OnClick" Style="{StaticResource MainButtonBottomLeft}" Background="#efefef" Margin="0,10,10,0" HorizontalAlignment="Center" Width="490" Height="200">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="400" Height="200">
<TextBlock FontSize="28" Height="40" Margin="0,10,0,0" Name="BlablaText">Bla</TextBlock>
<TextBlock FontSize="18" Height="30" Name="BlablaInfo"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="#859fcd" Margin="0,10,0,0" Width="460" />
<StackPanel Name="BlablablIssuer" Height="100" Orientation="Horizontal">
<Image Source="/Images/Blasdsd.png" Width="95" Height="35" />
</StackPanel>
</StackPanel>
</Button>
<Button Name="CashButton" Click="Cash_OnClick" Style="{StaticResource MainButtonBottomRight}" Background="#efefef" Margin="0,10,0,0" HorizontalAlignment="Center" Width="490" Height="200">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="400" Height="200">
<TextBlock FontSize="28" Height="40" Margin="0,10,0,0" Name="NoteText">Bla</TextBlock>
<TextBlock FontSize="18" Height="30" Name="NoteInfo"><Run Text="Schweizer Franken Banknoten"/></TextBlock>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="#859fcd" Margin="0,10,0,0" Width="460" />
<StackPanel Name="noteIssuer" Height="100" Orientation="Horizontal">
<Image Source="/Images/100frank.jpg" Width="85" Height="55" Margin="0,0,5,0"/>
<Image Source="/Images/50frank.jpg" Width="80" Height="55" Margin="0,0,5,0" />
<Image Source="/Images/20frank.jpg" Width="80" Height="55" Margin="0,0,5,0" />
<Image Source="/Images/10frank.jpg" Width="75" Height="55" Margin="0,0,0,0" />
<Image Source="/Images/qrCode.png" Width="51" Height="45" Margin="0,28" />
</StackPanel>
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</StackPanel>
Without actually facing the issue I can make only suggestions.
Potential reason could be that window object getting initialized prior to having all buttons enabled in actual Application window.
You could add a wait time prior to initialize window
I have a Binding page for some bugs and another one for comments in my app. The first one work properly, but the second one don't show anything but the data(21 comments) load successfully.
I've been taking a look to the live Live Property Explorer and the first Grid have those options:
However, the second one have the ItemsSource set as null:
This should not be possible, because those items have the same code just with few changes to make them load different.
Here you have the code:
<Page.Resources>
<DataTemplate x:DataType="data:Book" x:Key="BookDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Image Width="150" Height="150" Source="{x:Bind CoverImage}" />
<StackPanel HorizontalAlignment="center" Orientation="Horizontal">
<TextBlock FontSize="10" Text="{x:Bind DScore}" HorizontalAlignment="Center" Foreground="#FF21C721" />
<TextBlock FontSize="10" Text="{x:Bind DFav}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
</StackPanel>
<TextBlock FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center" Foreground="White" />
<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
<ToolTipService.ToolTip>
<TextBlock Text="{x:Bind DData}"/>
</ToolTipService.ToolTip>
</StackPanel>
</DataTemplate>
</Page.Resources>
<GridView ItemsSource="{x:Bind Books}" AllowDrop="True" IsSwipeEnabled="True" IsItemClickEnabled="True" ItemClick="Content_ItemClick" Name="Content" Margin="0,100,0,40" CanReorderItems="True"
CanDragItems="True"
ItemTemplate="{StaticResource BookDataTemplate}" ReorderMode="Enabled"/>
And the Comments gridview:
<Page.Resources>
<DataTemplate x:DataType="data:Comment" x:Key="CommentDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Grid>
<Rectangle Margin="50, 0, 0, 30" Fill="#FF144772" Height="100" Stroke="Black" Width="500" HorizontalAlignment="Center"/>
<Rectangle Margin="60, 0, 0, 45" Fill="#FF031131" Height="60" Stroke="Black" Width="60" HorizontalAlignment="Left"/>
<Rectangle Margin="140, 0, 0, 25" Fill="#FF103F91" Height="60" Stroke="Black" Width="360" HorizontalAlignment="Left"/>
<Image x:Name="image" HorizontalAlignment="Left" Height="50" Margin="65,18,0,0" VerticalAlignment="Top" Width="50" Source="Assets/profile.png"/>
<StackPanel HorizontalAlignment="center" Orientation="Horizontal">
<TextBlock Margin="0, 70, 400, 0" FontSize="10" Text="{x:Bind Date}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
</StackPanel>
<TextBlock Margin="130, 0, 0, 0" FontSize="16" Text="{x:Bind Author}" HorizontalAlignment="Left" Foreground="White" />
<TextBlock Margin="150, 30, 0, 0" FontSize="11" Text="{x:Bind Body}" Width="360" HorizontalAlignment="Left" Foreground="#FF9C9C9C" />
<ToolTipService.ToolTip>
<TextBlock Text="{x:Bind Score}"/>
</ToolTipService.ToolTip>
</Grid>
</StackPanel>
</DataTemplate>
</Page.Resources>
<GridView ItemsSource="{x:Bind Comments}" AllowDrop="True" IsSwipeEnabled="True" IsItemClickEnabled="True" Name="Content" Margin="0,100,0,40" CanReorderItems="True"
CanDragItems="True"
ItemTemplate="{StaticResource CommentDataTemplate}" ReorderMode="Enabled"/>
Can somebody help me identify the problem here please?
In the XAML file of your 2nd page go to "Comments" in ItemsSource and press F12. If you could navigate to definition of Comments means your binding is successful but Comments is not getting populated. If you could not navigate to definition means binding is not working. In that case check if datacontext has been set for that page. Also check how "Comments" is spelled in XAML and in the property.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to click on any row in gridview then a menu appears under the clicked row
any help please ??
here is my code
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:RoomInfo" x:Name="gridDataTemplate">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="StackPanel_Tapped" x:Name="sp" >
<TextBlock x:Name="RoomNo" FontSize="25" Foreground="White" Padding="20" Text="{x:Bind RoomNo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120"/>
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind host}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="130"/>
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind Status}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150"/>
<Image x:Name="AvailabilityLogo" Source="{x:Bind imageSource}" Width="15" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind Date}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="170"/>
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind TimeFrom}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100"/>
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{x:Bind TimeTo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
You can use a UserControl as the Content of each item, by right clicking the project in the solution Explorer, then choose "Add" and "New Item...", in the popup window choose "User Control", give a name to it and confirm to create one.
Now you can modify your user control like this:
<UserControl
x:Class="DropDownMenuForeachRowInGridView.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DropDownMenuForeachRowInGridView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="StackPanel_Tapped" Grid.Row="0">
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding RoomNo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding host}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="130" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding Status}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" />
<Ellipse Width="15" Height="15" Fill="{Binding ellipseColor}" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding Date}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="170" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding TimeFrom}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
<TextBlock FontSize="25" Foreground="White" Padding="20" Text="{Binding TimeTo}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
</StackPanel>
<StackPanel x:Name="dropDown" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="1" Visibility="Collapsed" BorderBrush="White" BorderThickness="2" CornerRadius="5">
<TextBlock Text="Host:" FontSize="25" Padding="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" />
<Button Content="Book now" Click="Button_Click" Margin="30,0,0,0" />
</StackPanel>
</Grid>
</UserControl>
code behind:
public sealed partial class MyUserControl : UserControl
{
public ObservableCollection<RoomInfo> roominfo;
public MyUserControl()
{
this.InitializeComponent();
roominfo = new ObservableCollection<RoomInfo>();
roominfo.Clear();
roominfo.Add(new RoomInfo { RoomNo = "2NR12", host = "Available", Status = "Available", ellipseColor = "#FF008000", Date = "June 18,2016", TimeFrom = "02:00", TimeTo = "03:00" });
roominfo.Add(new RoomInfo { RoomNo = "2NR12", host = "Ayman", Status = "Meeting", ellipseColor = "#FFFF0000", Date = "June 19,2016", TimeFrom = "11:00", TimeTo = "All Day" });
}
private void StackPanel_Tapped(object sender, TappedRoutedEventArgs e)
{
dropDown.Visibility = Visibility.Visible;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
dropDown.Visibility = Visibility.Collapsed;
}
}
Now the problem is how to use it in the GridView's DataTemplate.Before we doing this, we need to know that this user control can be expanded, so the height of this control can be dynamic changeable. And the GridView control uses ItemsWrapGrid as its ItemsPanel, this will force all the other items's size be the same with the first item's size.
Basically, it means, if your first item is expanded, the other items will change the height to the first item's height but will not expand the drop down menu, and if the first item is not expanded, when you expand the other items, the expanded item and the original one will be re-sized. So I just use this user control in both ListView and GridView, you may compare them.
<ListView x:Name="listView" ItemsSource="{x:Bind roominfo}" Header="ListView">
<ListView.ItemTemplate>
<DataTemplate>
<local:MyUserControl />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<GridView x:Name="gridView" ItemsSource="{x:Bind roominfo}" VerticalAlignment="Bottom" Header="GridView">
<GridView.ItemTemplate>
<DataTemplate>
<local:MyUserControl />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
code behind:
private ObservableCollection<RoomInfo> roominfo;
public MainPage()
{
this.InitializeComponent();
MyUserControl control = new MyUserControl();
roominfo = control.roominfo;
}
Here is the rendering image of my demo:
In case you need my demo to have a test, please check here.
I have a gridview in a store app which is dynamically bound to a Collection
<GridView x:Name="Gridview1" Height="180" HorizontalAlignment="Left" VerticalAlignment="Top"
ScrollViewer.HorizontalScrollMode="Disabled" SelectionMode="None" >
<GridView.ItemTemplate>
<DataTemplate >
<Border Background="White" BorderBrush="LightGray" BorderThickness="3" Height="150" Width="150" Tapped="peopleDashboard_Tapped" PointerEntered="Gridview1_PointerEntered" PointerExited="Gridview1_PointerExited" >
<Grid Margin="5" >
<TextBlock Text="{Binding TileName}" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Top"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding TileValue}" Foreground="Orange" FontSize="18" VerticalAlignment="Bottom" HorizontalAlignment="Center"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
And I am binding this gridview in code behind like this
Gridview1.ItemsSource = listObj;
I will get 7 boxes . on hover gridview has a hover border color for each item.
I need to disable just one particular item in the gridview.
I can write Gridview1.IsEnabled = false for disabling the whole gridview.
But I need to disable only a particular item.
Here is a picture of the populated gridview
this is the disabled gridview.
I need to disable only one box in the gridview.
Any possible suggestions ?
you can try it with IValue Converter. When binding the data if Value is 'InProgress' make it disable, something like this you want I think. Try googling how to use IValue Converter.
many years later....I stumbled upon this problem myself when trying to make some inactive items in my UWP project..my solution was to employ use of the extended DataTemplateSelector that allows one to enable/disable the gridview item based on the associated class object's properties as described here:
https://www.jerriepelser.com/blog/disable-item-selection-winrt-gridview/
<Page.Resouces>
<DataTemplate x:Name "ActiveItem" >
<Border Background="White" BorderBrush="LightGray" BorderThickness="3" Height="150" Width="150" Tapped="peopleDashboard_Tapped" PointerEntered="Gridview1_PointerEntered" PointerExited="Gridview1_PointerExited" >
<Grid Margin="5" >
<TextBlock Text="{Binding TileName}" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Top"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding TileValue}" Foreground="Orange" FontSize="18" VerticalAlignment="Bottom" HorizontalAlignment="Center"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Name "InactiveItem" >
<Border Background="White" BorderBrush="LightGray" BorderThickness="3" Height="150" Width="150" Tapped="peopleDashboard_Tapped" PointerEntered="Gridview1_PointerEntered" PointerExited="Gridview1_PointerExited" >
<Grid Margin="5" >
<TextBlock Text="{Binding TileName}" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Top"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding TileValue}" Foreground="Orange" FontSize="18" VerticalAlignment="Bottom" HorizontalAlignment="Center"
TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Grid>
</Border>
</DataTemplate>
<local:SelectionItemTemplateSelector x:Key="DataTemplateSelector" ActiveItemDataTemplate="{StaticResource ActiveItem}" InactiveItemTemplate="{StaticResource InactiveItem}"/>
</Page.Resources>
<GridView x:Name="Gridview1" Height="180" HorizontalAlignment="Left" VerticalAlignment="Top"
ScrollViewer.HorizontalScrollMode="Disabled" SelectionMode="None" ItemTemplateSelector="{StaticResource DataTemplateSelector}" >
</GridView>
The items below show up normally when I do not have them inside the HyperlinkButton.
However, when I add them to the HyperlinkButton, they become invisible.
<DataTemplate>
<HyperlinkButton NavigateUri="/ViewChallenge.aspx">
<HyperlinkButton.Content>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="{Binding Path=Challenge.Image}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Path=Challenge.Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<HyperlinkButton NavigateUri="ViewUser.aspx" >
<HyperlinkButton.Content>
<TextBlock Text="{Binding Path=User.Username}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</HyperlinkButton.Content>
</HyperlinkButton>
</StackPanel>
</StackPanel>
</HyperlinkButton.Content>
</HyperlinkButton>
</DataTemplate>
As far as I know, the Hyperlink button only supports text. For example:
<HyperlinkButton Height="100" Width="300">
Hello World
</HyperlinkButton>
Maybe you should use a Button control and set a Control template and enter the XAML you mentioned above inside. It makes more sense in my opinion. Try this:
<ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="{Binding Path=Challenge.Image}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Path=Challenge.Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Path=User.Username}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</ControlTemplate>
And simply set the template for your button like so:
<Button x:Name="myButton" Template="{StaticResource MyButtonTemplate}" Click="myButton_Click"/>
And then do the navigation inside the click event.