I am displaying Calendar to the user from My WPF application. I have the Observable collection and binding these collections from the viewmodel.In Order to display as like Calendar (first 7 columns in first row, second 7 columns in the next rows ect),I am using "Wrap Panel".The Below code works perfectly in Windows 7.But When I tried to run this in Windows 8,I can see Only the first 5 columns are displaying in a Row. How can I solvemit?Is there any problem for Wrap Panel Width in Windows 8 Os?
<ListBox x:Name="lstIcon" Grid.Row="1" ItemsSource="{Binding CalenderDatalist}" Background="#FFF9F9F9" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="245">
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="33" Height="60">
<TextBlock Width="15" Text="{Binding Day}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Foreground="Red" />
<StackPanel Background="{Binding IsDropped,Converter={StaticResource BooleanToBackgroundConvertor}}" >
<TextBlock Width="25" Text="{Binding From}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" />
<TextBlock Width="25" Text="{Binding To}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" />
<TextBlock Width="25" Text="{Binding Time}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Since your DataTemplate items are having fixed size, set ItemWidth property to WrapPanel.
Like,
<WrapPanel Orientation="Horizontal" Width="245" ItemWidth="33">
</WrapPanel>
Related
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 working on C# WPF Chat application. I want it to look like Skype chat, so last added item is touching the bottom of ListBox.
Screenshot:
<ListBox Name="ListBoxMain" Grid.Column="1" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding User}" FontWeight="Bold" />
<TextBlock Text=": " FontWeight="Bold" />
<TextBlock Text="{Binding Text}" Width="225" TextWrapping="Wrap" HorizontalAlignment="Stretch" />
</WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to update the internal ItemsPanelTemplate of the ListBox... try this:
<ListBox Name="ListBoxMain" Grid.Column="1" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding User}" FontWeight="Bold" />
<TextBlock Text=": " FontWeight="Bold" />
<TextBlock Text="{Binding Text}" Width="225" TextWrapping="Wrap" HorizontalAlignment="Stretch" />
</WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I am developing one windows store application. There is one listview and listview contains Image , Checkbox Controls.
XAML Code:
<ListView Name="display" ItemsSource="{Binding}" SelectionMode="Single"
SelectionChanged="display_SelectionChanged"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"
ItemContainerStyle="{StaticResource ListViewItemStyle12}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stak2" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Path=Image}" Width="450" Tapped="image_taped" />
<CheckBox Tag="{Binding Path=tag}" Visibility="{Binding Path=visichk}" Height="40" Name="addremove"
HorizontalAlignment="Center" Checked="add_checked" Unchecked="sub_checked" Opacity="0.5"
Background="White" VerticalAlignment="Top" Template="{StaticResource CheckboxImageTemplate}" >
</CheckBox>
<TextBlock Text="{Binding Image_code}" FontSize="25" Foreground="Gray" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to get index(Position) of checked CheckBox in add_checked event of checkbox.
how can it possible please help me.
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!
How do i populate a two column grid with objects from my observable collection?
I've tried to achieve this effect by using the tookits wrap panel but the items just stack.
<toolkit:WrapPanel Margin="5,0,0,0" Width="400">
<ItemsControl ItemsSource="{Binding Trips}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Height="236" Width="182">
<Button Style="{StaticResource VasttrafikButtonTrip}">
<StackPanel Width="152" Height="140">
<TextBlock Text="{Binding FromName}" />
<TextBlock FontFamily="Segoe WP Semibold" Text="till" />
<TextBlock Text="{Binding ToName}" />
</StackPanel>
</Button>
<TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
<TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCountText}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</toolkit:WrapPanel>
The only child for the WrapPanel will be the ItemsControl so the stacking is done by the internal ItemsPanel in the ItemsControl which, by default, is a StackPanel with Vertical Orientation. So to get "two columns", try to move the WrapPanel into the ItemsControl.ItemsPanel instead like this
<ItemsControl ItemsSource="{Binding Trips}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Margin="5,0,0,0" Width="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Height="236" Width="182">
<Button Style="{StaticResource VasttrafikButtonTrip}">
<StackPanel Width="152" Height="140">
<TextBlock Text="{Binding FromName}" />
<TextBlock FontFamily="Segoe WP Semibold" Text="till" />
<TextBlock Text="{Binding ToName}" />
</StackPanel>
</Button>
<TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
<TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCountText}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>