I've got a page design as follows:
The layout is as follows:
<ScrollViewer Margin="0" HorizontalAlignment="Left" Height="360" VerticalAlignment="Bottom">
<StackPanel x:Name="spQueuedWeapons" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<ItemsControl ItemsSource="{Binding QueuedCombinations}" HorizontalAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageName}">
<i:Interaction.Behaviors>
<ex:MouseDragElementBehavior ConstrainToParentBounds="False" />
</i:Interaction.Behaviors>
</Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
The problem I'm seeing is that the MouseDragElementBehavior seems to be visually constrained to the bounds of the ScrollViewer.
I want to be able to drag the green boxes to the blue drop target.
The only options I've thought of so far have been to remove the containing ScrollViewer or to simulate the StackPanel layout programmatically.
I'd rather not add manual button based scrolling or programmatic layout if possible.
Does anyone have any ideas?
Related
I have an Editor control inside ListView. If the text is larger than Editor height, I want to be able to scroll the Editor without clicking inside the Editor. But ListView scroll only working, Editor scroll not working.
<ListView
x:Name="listProjects"
HasUnevenRows="true"
SeparatorVisibility="None"
ItemsSource="{Binding Feedbacks}"
HorizontalOptions="FillAndExpand"
ItemTapped="Handle_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,15,15,15" BackgroundColor="Transparent">
<Editor HeightRequest="50" FontSize="Small"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can use a ScrollView to wrap the Editorlike following code.
<ScrollView HeightRequest="50">
<Editor Text="22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222" ></Editor>
</ScrollView>
Here is running GIF.
And please update Xamarin forms nuget packages to 4.7.0.1179 or later.
I have the following listbox:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,10,0,10">
<TextBlock
Foreground="Black"
Text="{Binding name}"/>
<TextBlock
Foreground="Black"
Text=": "
Visibility="{Binding
Path=name,
Converter={StaticResource ServiceOtherConverter}}"/>
<TextBlock
Foreground="Black"
Text="{Binding amount}"
Visibility="{Binding
Path=name,
Converter={StaticResource ServiceOtherConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And my app has a white background, so I'd like to set the list items foreground to black. But when I select an item, its foreground doesn't change, as it does whith the default foreground.
How can I change the list items foreground to black but still have the selected foreground different?
You just need to change the Foreground in the Selected VisualState at the style template level for the ListBox Item. For reference you might peek at the msdn doc for ListBox Styles and Templates. Expression Blend makes it pretty painless. Just right-click your item and choose "Edit Additional Templates" and choose the Item template. Then from the States tab, choose the Selected State and change the foreground color. Or you could just do it directly in the template code. Hope this helps.
I have this code in my .xaml file
<ListBox Name="Tracks" Margin="0,0,-12,0" ItemsSource="{Binding AllTracks}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="150">
<TextBlock Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Artist}" TextWrapping="NoWrap" Margin="12,-3,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Album}" TextWrapping="NoWrap" Margin="12,3,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Duration}" TextWrapping="NoWrap" Margin="12,6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I put data in my list like that(MediaLibrary library = new MediaLibrary();
Tracks.ItemsSource = library.Songs;).
I can see data on my list but when i select something, the selection doesn't highlighted,
how i can fix it? Thanks...
The phone applies the Accent colour as Foreground to the selected element's VisualTree. But since you're overriding the style for all the elements, it's likely that the colour won't be applied.
Try with a regular TextBlock without any Style, and you'll see.
Here: Windows Phone 7 - Setting style for specific control within selected ListBoxItem I've written a bit in response to a similar problem. Please read at least the original post/problem and my answer to it. It may look overwhelming at first as there's not a small amount of extra XAML, but in fact it is quite easy to follow and once you look at it as a several different aspects (template, styles, visualstates) - it turns out to be .. quite short, paradoxically. Once you read through it, you will probably notice that your problem is almost exactly the same, with the minor difference that the 'animated' property/target from foreground of textbox to a background of the panel..
I have a WP7 project that has been giving me the runaround for too many days now. Any help in sorting this out would be hugely appreciated.
Basically, I have a ScrollViewer. Inside I have an ItemsControl. The ItemTemplate for the ItemsControl contains an Expander (adapted from the Silverlight 3 Toolkit). The Expander ContentTemplate has an ItemsControl.
Basically, what is happening is that when I expand one of the Expander items and that ItemsControl contains a larger amount of items (> 25), the "rendering" of the list appears to be truncated. There is a large empty space where the items should go, so there appears to be space reserved for them, but try as I might, they simply get truncated.
I've tried with three different types of Expander controls including the ExpanderView. Same results no matter what I try.
Here is a screenshot: http://www.IntuitiveWebDesigns.com/Photos/truncation.png
Here is a snippet from the XAML I am using.
<ScrollViewer Grid.Row="1">
<ItemsControl ItemsSource="{Binding Publishers}" Margin="0,10,0,0" Height="Auto">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="Black" Opacity="60" OpacityMask="#8A000000" CornerRadius="10">
<controlToolkit:Expander ExpandDirection="Down" Header="{Binding}" Content="{Binding}" Height="Auto">
<controlToolkit:Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding PublisherName}"
Foreground="{StaticResource PhoneAccentBrush}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
</DataTemplate>
</controlToolkit:Expander.HeaderTemplate>
<controlToolkit:Expander.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Issues}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding TitleAndIssue}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
<TextBlock Text="{Binding StrAmount}"
TextWrapping="Wrap"
Margin="0,0,0,0"
Foreground="{StaticResource PhoneAccentBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</controlToolkit:Expander.ContentTemplate>
</controlToolkit:Expander>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
You're hitting a limitation of the platform. Specifically that a UIElement can't be larger than 2048px in either dimension. This limitation exists for memory and performance reasons.
Rather than building your own control, try using one of the standard ones, or one from the phone version of the toolkit.
If you really want to use an expander style control, then reserve a smaller fixed size for the scrollable area and virtualize the list that is displayed.
I've spent a lot of time trying to understand and to implement something that looks easy.
In my WP7 application, I have a button that displays a context menu after a long tap. As this context menu is bound to a list, the number of items can be huge. Until now, I haven't been able to add a scroll viewer around my data template. But I have tested that if the data template was not there, it should work fine.
Here is my XAML:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu ItemsSource="{Binding}">
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate >
<toolkit:MenuItem Header="{Binding Path=Name}" Click="MenuItem_Click"/>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
I tried to add a ScrollViewer almost everywhere (before the tag: <toolkit:ContextMenuService.ContextMenu>, before the tag <toolkit:ContextMenu ItemsSource="{Binding}">,...) but nothing works
I also tried to use an attached property in my tag:
<toolkit:ContextMenu ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Visible">
but it doesn't work either.
But if I don't use a data template like:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<ScrollViewer>
<stackPanel>
<toolkit:MenuItem Header="Item1"/>
<toolkit:MenuItem Header="Item2"/>
<toolkit:MenuItem Header="Item3"/>
<toolkit:MenuItem Header="Item4"/>
</stackPanel>
</ScrollViewer>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
it works fine.
Did I miss something?
You will want to put your ScrollViewer in the Template and a StackPanel in your ItemsPanelTemplate, so something like this:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu ItemsSource="{Binding}">
<toolkit:ContextMenu.Template>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border>
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</toolkit:ContextMenu.Template>
<toolkit:ContextMenu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</toolkit:ContextMenu.ItemsPanel>
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate >
<toolkit:MenuItem Header="{Binding Path=Name}" Click="MenuItem_Click"/>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>