I've got an issue that the TextBlock not showing fully while the string is more than 1000 characters.
I've tried use this code
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
or
VerticalAlignment="Stretch" on my TextBlock
or use this code
<ListBox ItemsSource="{Binding ArticleDataDetail}" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding TaxoName}" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FF2976B9"/>
<TextBlock Text="{Binding Title}" FontWeight="Bold" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle3Style}"/>
<Image Source="{Binding Picture}" Width="auto" Name="articleImage" Margin="10"/>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But It still not show.
my code:
<Grid Margin="12,0,12,0" DataContext="{Binding ArticleDataDetail[0]}">
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<StackPanel>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" VerticalAlignment="Stretch"></TextBlock>
<TextBlock Text="GeuT"></TextBlock>
</StackPanel>
</ScrollViewer>
</Grid>
Do you mean the TextBlock in the ItemTemplate? If it's the case maybe this helps:
Set the HorizontalContentAlignment attribute of the ListBox to "Stretch":
<ListBox ... HorizontalContentAlignment="Stretch"></ListBox>
I'm just guessing what your problem is, so if it's not the case I think you should make your question clearer: rephrase it or add some illustrating images.
Another thing I could think of - without a screenshot - is that maybe the Textblock is too small to fit all the content and that it would have to be scrollable.
Scrollbars don't appear automatically if the text exceeds the display item size limits. You can enable them by adding the following properties to your TextBlocks:
ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible"
Related
I want to have the ListItems to extend with their Stackpanel the full width of the Listbox.
Currently they are only as wide as the textblocks.
What do I have to do so that the Stackpanel of the ListBoxItems fill the width of the ListBox?
<ListBox Name="feedListBox" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionMode="Single" SelectionChanged="feedListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe UI Symbol" Text="⛽" FontSize="25"/>
<StackPanel Orientation="Vertical">
<TextBlock Name="txtDate" Text="{Binding Date}" FontSize="15" Margin="20,0,0,0"/>
<TextBlock Name="txtDitance" Text="{Binding Distance}" FontSize="15" Margin="20,5,0,0"/>
</StackPanel>
<TextBlock Name="txtPrice" Text="{Binding Price}" FontSize="15" Margin="30,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
delete: VerticalAlignment="Top"
and use: HorizontalContentAlignment="Stretch"
I have a GridView which is populated (through binding) by an ObservableCollection. How do I set it up so that every time a new item is added to the ObservableCollection, the last item in the GridView always has a button on top of it ?
This is the XAML of the GridView's ItemTemplate
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="White">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding DateMade}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
My problem lies in this template being applied for all items in the GridView. I want it so that if it's the last item (and the last item would keep changing every time a new item is added), the above StackPanel should be replaced by another control (say, a button). How would I go about doing this ?
I would extend the template of all elements but hide the additional element and only show it if it's the latest element (specified by some bool property that is set to true on the last element). Something like this.
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="White">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<Button Visibility="{Binding IsLastElement, Converter={StaticResource BoolToVisibilityConverter}}"/>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding DateMade}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
I think another option is to change the DataTemplate dynamically using TemplateSelecting event, on changing content of elements, but it would be a little bit more work.
There might be better solutions though.
Edit
Decided to share some links for the aforementioned idea (Which I've used in WinRT) and another one available in WPF
WPF Based Dynamic DataTemplateSelector - used similar approach in WinRT
DataTemplateSelector - tried slightly modified example and works fine
I am writing a Windows Phone 8.1 App (WINRT)
I want to display a list of countries in registration page out of which user can select one. In Windows Phone 7, we used to have LongListSelector.
What is its replacement in Windows Phone 8.1 (WinRT).
Actually, I want users to click on this control and it should open in fullscreenmode.
I am confused between ListView, ListBox, Semanticzoom
I am currently using:
<ListView
Name="UserCountry_ListPicker"
FullModeHeader="Select Country:"
SelectedIndex="-1"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
FontWeight="ExtraLight"
Margin="0,5,0,0"
BorderBrush="{StaticResource DefaultTheme_DarkBlueColor}"
BorderThickness="0.2,0.2,0.2,3"
VerticalContentAlignment="Bottom"
VerticalAlignment="Bottom"
Background="{StaticResource DefaultTheme_TextBoxBackground_Light}"
SelectionChanged="UserCountry_ListPicker_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="0,0,0,0">
<Border
Background="{StaticResource DefaultTheme_DarkBlueColor}"
Width="28"
Height="28">
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Symbol}"
FontSize="14"
FontWeight="ExtraLight"
Foreground="WhiteSmoke"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Name}"
FontWeight="ExtraLight"
Margin="12 0 0 0"
FontSize="21"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.FullModeItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="20,5,0,5"
>
<Border
Background="{StaticResource DefaultTheme_DarkBlueColor}"
Width="68"
Height="68">
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Symbol}"
FontSize="26"
FontWeight="ExtraLight"
Foreground="WhiteSmoke"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<TextBlock
Text="{Binding CountryWithCodesGroupItem_Name}"
FontWeight="ExtraLight"
Name="CountryNames"
Margin="12 0 0 0"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
FontSize="26"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListView.FullModeItemTemplate>
<ListView.HeaderTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="0,0,0,-5">
<TextBlock
Name="UserCountry_Label"
FontSize="25"
FontWeight="ExtraLight"
Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
Text="Country">
</TextBlock>
<Image Source="ms-appx:///Images/Login_RegistrationPage/athteriskRedForm_01.png"
Margin="3,0,0,0">
</Image>
</StackPanel>
</DataTemplate>
</ListView.HeaderTemplate>
</ListView>
But it shows opened list on page. Can't I have it closed on page like this:
example image
Maybe you will consider using ListPickerFlyout:
<Button Content="Choose country">
<Button.Flyout>
<ListPickerFlyout ItemsSource="{Binding CountryList}" Placement="Full" ItemsPicked="Items_PickedEven">
<ListPickerFlyout.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding CountryName}"/>
</DataTemplate>
</ListPickerFlyout.ItemTemplate>
</ListPickerFlyout>
</Button.Flyout>
</Button>
You may also think of using general Flyout and define it's content as ListView, ListBox or other.
As far as the differences between the three are concerned, ListView is essentially like a ListBox however it also has a View property that ListBox does not have. The View property is useful for specifying a prefdefined way to display items.
A SemanticZoom control often has a ListView control within it, and allows you to switch between two different views of the list's data set.
I am currently using a GridView to display a list of images that the user can swipe through. When they get close to the end of the list, new images load through the use of a ObservableCollection that implements ISupportIncrementalLoading.
How do I change the cell size to match the size of the image? The images are sometimes in Portrait, and sometimes in Landscape, and sometimes in an non-uniform aspect ratio; however, the GridView insists on all the cells being the same width.
e.g. if I go with the following:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="None"
DataFetchSize="10"
IncrementalLoadingThreshold="5"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IncrementalLoadingTrigger="Edge"
IsSwipeEnabled="false">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,5,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I end up with all the times being the same width as the first image. If I try to set the image width (I have a databound property that returns the image width), some of the images end up being less wide, but the cell they are in is still the same width as everything else.
<Image Width="{Binding ImageWidth}" Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
Setting the width on any item in the hierarchy doesn't seem to help - even taking this to the extreme doesn't help at all - e.g.
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="{Binding ImageWidth}">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="{Binding ImageWidth}">
<Image Width="{Binding ImageWidth}" Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,5,0"/>
</StackPanel>
</Grid>
</DataTemplate>
There are two ItemsPanelTemplate-s that supports incremental loading: VirtualizingStackPanel and WrapGrid.
WrapGrid does not allow different items' size.
VirtualizingStackPanel allows variable size of items but displays items in one row/column.
So if you want a different layout you need a custom implementation of VirtualizingPanel.
But I do not understand what do you want exactly. If you want a grid then all items in a row or column will have the same height or width. Do you want a virtualizing VariableSizedWrapGrid?
Take a look at the VariableSizedWrapGrid
try to add this xaml to your GridView declaration:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
I have a DataTemplate for my ListBox and want to wrap a TextBlock, so the message will be displayed in the next line... So I've written this code:
<ListBox x:Name="CareListBox" ItemsSource="{Binding}" Grid.Column="1" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="pic.png" />
<TextBlock Text="{Binding Message}" Style="{StaticResource SubheaderTextStyle}" Margin="25,0,0,0" HorizontalAlignment="Stretch" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What am I doing wrong?
I would use a Grid with two columns rather than a horizontal StackPanel as the StackPanel won't have a width constraint.