i am using grid view control for to show data,
problem is, my few text is very long and it is not warping correctlly
xaml is like this :
<GridView x:Name="itemGridView" Grid.Row="2" Margin="30,20,0,0" AutomationProperties.AutomationId="ItemsGridView" AutomationProperties.Name="Items" TabIndex="1" Grid.RowSpan="2" ItemsSource="{Binding EquipBookingCollection}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"/>
and ItemTemplate is like this :
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left">
<StackPanel Margin="5">
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Start Time : " Style="{StaticResource TitleTextStyle}"></TextBlock>
<TextBlock Text="{Binding BookedFromDteTme }" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Finish Time: " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding BookedToDteTme }" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Task Address : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding TaskAddress}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Task Description : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding TaskDescription}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Client Company : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding ClientCompany}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Status Name : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding Status.Description}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0" Foreground="Red"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
please help me with this, thanks
This is a related issue to TextBlock TextWrapping not wrapping inside StackPanel
In short, you'll want to stop using StackPanel control and use the much better Grid control instead.
Set the width property of textblock
<TextBlock Text="{Binding BookedFromDteTme }" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0" Width = "200"/>
Instead of StackPanel you can use WrapPanel
</WrapPanel>
Related
<ListBox Grid.Row="1" Name="listBox" Background="#2e2e2e" BorderThickness="0" Margin="0,71.8,0,0">
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Background="#1f1f1f" Height="150" Width="1169" MouseEnter="listBox_Selected" MouseLeave="listBox_Unselected" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">
<Image Name="listImg" Source="{Binding image}" Width="120" Height="150" HorizontalAlignment="Left" Stretch="Fill"/>
<TextBlock Foreground="White" Text="{Binding title}" FontSize="19" Margin="132,-140,0,0" HorizontalAlignment="Left"/>
<TextBlock Foreground="#FFABAAAA" Text="{Binding comment}" FontSize="17" Margin="132,-90,0,0" Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Left"/>
<TextBlock Foreground="White" Text="{Binding username}" FontFamily="Poetsen One" FontSize="13" Margin="130,-25,0,0" Height="Auto" HorizontalAlignment="Left"/>
<TextBlock Foreground="CornflowerBlue" Text="{Binding cost}" FontSize="16" Margin="1080,-30,0,0" Height="Auto" HorizontalAlignment="Left"/>
<TextBlock Foreground="White" Text="{Binding id}" FontSize="15" Margin="0,0,0,0" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I can't reach listImg.
I have to use it when I select the listbox item.
How can I reach it in code above?
I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data
Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)
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>
I have a listbox in my windows phone application. In the listbox DataTemplate I placed a button. How can I get the button object in codebehind. I am not getting the reference of the rowButton in the .cs file. I want to change the button background color of button of each row. how can I get the button reference in the code behind ?
I following code I used for listview.
<Grid Height="530" Grid.Row="1" VerticalAlignment="Top" Margin="0,30,0,0">
<ListBox Margin="0,0,0,0" Name="TransactionList">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="460" Height="150" Click="user_click" Name="rowButton" >
<Button.Content>
<StackPanel Orientation="Horizontal" Height="auto" Width="400">
<Image Width="80" Height="80" Source="{Binding Type}"></Image>
<StackPanel Orientation="Vertical" Height="150" Margin="20,0,0,0">
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="100" FontSize="22" Text="Name :" Height="40" ></TextBlock>
<TextBlock Width="auto" FontSize="22" Text="{Binding Name}" Height="40" ></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="100" FontSize="22" Text="Date :" Height="40" ></TextBlock>
<TextBlock Width="100" FontSize="22" Text="{Binding Date}" Height="40" ></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="100" FontSize="22" Text="Amount :" Height="40" ></TextBlock>
<TextBlock Width="auto" FontSize="22" Text="{Binding Amount}" Height="40" ></TextBlock>
<TextBlock Width="auto" FontSize="22" Text=" $" Height="40" ></TextBlock>
</StackPanel>
</StackPanel>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
If you want to change background on user click, in the click event handler use
Button button1 = sender as Button;
button1.Backgorund = new SolidColorBrush(Colors.Red);
to change the background color.
Else bind the background property for each button and change its value on iteration of the items in the listbox.
Without seeing how you've tried to access this is in code it's impossible to say why what you're doing isn't working.
However it'll be much easier if you use databinding to set the color of the templateitem
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.