I have a twitter feed in a list box in a app I'm making for Windows Phone 7. The problem I'm having is that the text of a tweet is being cut off the edge of the list box instead of wrapping around to a new line like this:
The list box is inside a panorama which works fine. This is my code:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="Auto">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can I get the tweet text to wrap round instead of being cut off? Thank you.
Since your inner StackPanel is nested within a horizontal Stackpanel, it has no constraint of depth, and so the TextBlocks expand infinitely as the text becomes longer.
There are a variety of ways you can fix the issue, but an easy one (if you know the width that you want) is to set the inner StackPanel's width to a finite number.
For example:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="400">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hope this helps!
Related
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.
I'm trying to highlight the selected item in a bridview from a windows application.
To be more precise:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="openRessource"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200" Height="250" Holding="openHoldMenu">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding icon}" Stretch="None"/>
</Border>
<Image Source="{Binding downloaded}" Width="30" Height="30" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
<TextBlock Text="{Binding description, Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This is my XAML, fairly simple, I just have a Holding event which brings up a menu in my page.
My problem is that I want to know which item has been held to create a border around it so that the user knows which item is selected.
I can easily access the bound item in my list but can't get the grid element selected.
If anyone know how to, that would be really appreciated.
Thank you!
Should be able to make a trigger such as this:
http://stackoverflow.com/questions/4539909/wpf-datagrid-selected-row-style
I'm making a Windows Phone 8 App with C# and I'm trying to display the output of XML to a Pivot page with several listboxes, the only hurdle standing in my way is the alignment of the items in the ingredients box, they appear like this:
Table Salt
1
Pinch
When I actually want them to appear like this
Table Salt
1 Pinch
Basically each item appears on a separate line and through messing around with stack panels I can't seem to get anything to appear on the same line, this is the xaml code I'm using currently:
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Can anyone suggest a fix? Thanks in advance!
If it were me I would nest another stack panel in your Data Template
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</StackPanel>
</DataTemplate>
A StackPanel stacks contained items vertically. You could use one single TextBlock with two run elements:
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Foreground="White">
<Run Text="{Binding IngredientQuantity}" />
<Run Text="{Binding IngredientUnit}" />
</TextBlock>
</StackPanel>
May be like this
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="10,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Use StackPanel property Orientation="Horizontal"
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/>
<TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
this is the code that is driving me insane. It works great on windows 8(Snap View), but when I try to run the same XAML in my windows phone 7 app, it doesn't work.
WHAT HAPPENS
The app runs fine, but the problem is that the screen is blank. I have tried to add some background to the itemtemplate, and it does show up which means that maybe the databinding is working. But the content of the 5 textblock's doesn't show.
<ListBox x:Name="result_s" Margin="0,296,0,0" HorizontalAlignment="Center" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="8,8,48,8" Orientation="Horizontal" Height="80">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="0,0,0,0" Text="{Binding coeff}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="4,0,0,0" Text="{Binding x}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="0,0,0,16" Text="{Binding xPow}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="4,0,0,0" Text="{Binding y}"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" Width="auto" TextWrapping="Wrap" Margin="0,0,0,16" Text="{Binding yPow}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Here is the code behind
void func()
{
ObservableCollection<Equation> answer = new ObservableCollection<Equation>();
// SOME CODE GOES IN HERE, THE CODE POPULATES answer
result_s.ItemsSource = null;
result_s.ItemsSource = answer;
}
Please, can you see any reason this won't work.
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.