This is probably an easy one... I have a Listbox with a ContextMenu embedded in it, and every time the ContextMenu appears, the Listbox changes its background to opaque black. How do I prevent this from happening?
Here is some sample XAML:
<ListBox x:Name="FolderItems" ItemTemplate="{StaticResource ItemTemplate}" ItemContainerStyle="{StaticResource ItemListBox}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" ItemsSource="{Binding FolderItems}">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu
x:Name="FolderContextMenu"
Margin="20"
Background="WhiteSmoke"
BorderBrush="Black"
BorderThickness="1.0"
Closed="ContextMenu_Closed">
<toolkit:MenuItem Loaded="ContextMenuItem_Loaded"
Opacity="0.0" Margin="5" Background="Transparent"
Click="ContextMenuItem_Click" Name="ContextMenuDelete">
<toolkit:MenuItem.Header>
<TextBlock Text="delete" FontFamily="Segoe WP Bold"/>
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</ListBox>
Thanks
Update
I still haven't figured out why the entire listbox goes black when the context menu appears. I've set everything I can think of to a transparent brush.
I fixed this for my situation by opening up the toolkit (downloading the source: Silverlight Toolkit), and editing the color values myself in ContextMenu.cs . Then, I rebuilt and targeted the dll that I created rather than the one from the installer.
The only issue is that I will now need to do this application specific, but at least I can have a resolution. I believe also that if you set IsZoomEnabled=false, it won't have this behavior in the first place, but it's a different experience.
Here's my edited version: Pastebin
Check out the lines like this, they're the ones you'll need to change:
// Create a layer for the element's background
UIElement elementBackground = new Rectangle
{
Width = ownerElement.ActualWidth,
Height = ownerElement.ActualHeight,
Fill = new SolidColorBrush(Colors.White),
};
Good luck!
There's a simple way to do this. For some reason MS Access complements the colors when using a list box. If you set the foreground to red, it will show green, etc.
So, set the background color to black (0) and the foreground color to white (16777215). Counter-intuitive but it works is MS Access 2002.
Without seeing the template you're using I can't say for sure but you've probably hardcoded a background value but not considered the different states of the list items and the default state colour/value is being displayed
Related
Sorry for my bad headline but I couldn't figure out a better one. Heck, I don't even know how to properly ask my question. But here it comes.
I have a custom control in WPF, let's call it Cell. This control does have a few dependency properties, one Text to show in the Cell and a few "decorative" properties for background color, foreground color and so on. If I use this Cell control stand-alone, everything works fine so far.
Then I have another custom control inheriting from ItemsControl, let's call it Field. This control should show a text and some Cells. it has some "decorative" properties for the text part as well. The information about showing Cells is given to the control by a DataTemplate, something like
<DataTemplate x:Key="CellTemplate"
DataType="...">
<ns:Cell Text="{Binding Text}"
Background="{Binding ...}" />
</DataTemplate>
...
<ns:Field ItemsSource="{Binding Cells}"
ItemTemplate="{StaticResource CellTemplate}" />
If I use this Field control stand-alone, everything works fine so far.
Now I want to show several Field controls at once. So I put an ItemsControl on my window and gave an ItemTemplate again, something like:
<DataTemplate x:Key="CellTemplate"
DataType="...">
<ns:Cell Text="{Binding Text}"
Background="{Binding ...}" />
</DataTemplate>
<DataTemplate x:Key="FieldTemplate"
DataType="...">
<ns:Field ItemsSource="{Binding Cells}"
ItemTemplate="{StaticResource CellTemplate}"
FieldText="{Binding Text}"
TextBackground="{Binding ...}" />
</DataTemplate>
<ItemsControl ItemsSource="{Binding Fields}"
ItemTemplate="{StaticResource FieldTemplate}" />
As long as I preview my WPF window everything works fine so far. Changing the values of some "decorative" properties at Cell level or at Field level is immediately shown in the preview.
But if I run my program it seems that all "decorative" properties at Cell level are ignored. I can see all my Fields with their respective texts and I can see every Cell in every Field with their respective texts. But all Cells are plain white. All set colors are not shown.
Snoop tells me, that every color is set to Transparent by the ParentTemplate.
Visual Studio doesn't show me any exceptions or any binding errors. So I'm kind of stuck at where or how I can find the error and fix it.
So I wanted to ask you, if you may have a hint for me.
Does this contruction with a DataTemplate containing a DataTemplate and both DataTemplates bind to it's DataContext work?
Or does it have something to do with maybe re-using Brush objects that shouldn't be re-used?
But why is it working in the preview?
I want to change the graphical UI elements in WPF.
For example, I want to use a kind of a stack panel, but on the other hand I want to show my details in a star, or circle, etc.
Maybe setting a bitmap as a background, but I am working with lots of Data using zoom tool.
I found tutorials, documentation only for changing attributes of "old components", but nothing to make new ones.
Great resource for WPF beginners is www.wpftutorial.net
One of the best idea of WPF is separation of concerns:
UI Control = Logic in Code/XAML + Template
Using templates in XAML we can vary representation without modifying the control.
For example, if there is a need in creation of list of items. Then we can use ListBox control:
<ListBox>
<ListBoxItem>USA</ListBoxItem>
<ListBoxItem>UK</ListBoxItem>
</ListBox>
By default LisboxItem internal part is just binded TextBlock.
Now making UI modification without changing control source code:
<ListBox ImageSource="{Binding PathToSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{StaticResource ProjectIcon}"/>
<TextBlock Text="{Binding Path=PropertyName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
there appears image and text.
If there is a need in creating exclusive control then you can always use Custom Control.
Using raster images (e.g. PNG) is not good point, especially with zoom behaviour. If it is possible better to use vector images, that can be created in XAML or imported from SVG.
I'm developing an opensource application named Media Assistant. I used a ListBox to show the library. ItemsSource is bound to a list of LibraryItem. Here is the XALM.
<ListBox Name="Tree" DockPanel.Dock="Top"
ItemsSource="{Binding DataSource.OrderedLibraryItems}"
Background="{StaticResource LibraryBackground}"
Width="220" HorizontalAlignment="Left"
BorderThickness="0"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Standard"
ScrollViewer.IsDeferredScrollingEnabled="True"
ItemTemplate="{StaticResource ListLibraryItemTemplate}"
SelectionMode="Single"
MouseDoubleClick="HandleMouseDoubleClick"
/>
The problem is when I show any status message at the bottom of my window from a thread by using Dispatcher.
Application.Current.Dispatcher.BeginInvoke(DispatcherPriority.Background,new ParameterizedThreadStart(action), state);
The ListBox scrolls to at the top. If I don't show any status message then it works just fine. The datacontext or list items or focus has not been changed. I could not found any reason why it's doing that. It happens when I display any wait screen which is a non modal window. I could not recreate it in a different project. Here is the source code of Media Assistant.
You can easily re-create it by un-commenting the return statement of method SetStatusMessage at BackgroundScanner class.
I found the reason behind this, so the solution.
I used a DockPanel to layout my UI. I put my status bar at the bottom, the ListBox on the Left and other items are on middle and top. There is a TextBlock in my StatusBar which has width and Height set to Auto. So, when I changed text of my StatusBar TextBlock it's width and height gets recalculated and It's parent's recalculates it's layout. Hence the ListBox gets invoked to Measures and Arrange. Even though it's size does not gets changed it resets it's scroll position to top. It happens only if I use ScrollViewer.CanContentScroll="True" at the ListBox. By default it is True. So, even though I did not set this value It was resetting the scroll position. If I disable it by using ScrollViewer.CanContentScroll="False" then it works fine.
<ListBox Name="Tree" DockPanel.Dock="Top"
ItemsSource="{Binding DataSource.OrderedLibraryItems}"
Background="{StaticResource LibraryBackground}"
Width="220" HorizontalAlignment="Left"
BorderThickness="0"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Standard"
ScrollViewer.IsDeferredScrollingEnabled="True"
ScrollViewer.CanContentScroll="False"
ItemTemplate="{StaticResource ListLibraryItemTemplate}"
SelectionMode="Single"
MouseDoubleClick="HandleMouseDoubleClick"
/>
But setting ScrollViewer.CanContentScroll="False" disables virtualization and I want to use virtualization to my ListBox so I set fixed Height and Width to the TextBlock. So, the DockPanel does not re-arrange it's children if I change the status message.
May be it's a bug at ScrollViewer. It should not change the scroll position if the size has not changed.
In reply to #user904627's answer, here is an enhanced version of his workaround. The issue with just fixing Width and Height is the ListBox keeps the same position even if the user resizes the Window. This is not acceptable.
This is why I created this tiny behavior which fixes Width and Height but listens to the parent element's SizeChanged event to let the ListBox resize itself when the container's size changes.
The code is here: VirtualizedListBoxFixBehavior
When the parent element is resized, I restore Width and Height to double.NaN (so the control can resize itself) and I queue the bit of code which fixes the size properties to actual values in the Dispatcher for later execution.
But this still is an ugly working workaround...
Try this:
listBox1.ScrollIntoView(listBox1.Items.GetItemAt(listBox1.Items.Count - 1));
Since the layout is being reset, it is expected that the list box to select the first item (0).
Can you try to set the selected item to the number of existing items in the list box:
Tree.SelectedIndex = Tree.Items.Count;
I did not test this solution on your code but I have used it in another project of mine where I had a similar problem.
Hope it helps.
Normally the silverlight controls know where they are in terms of who is in front of or behind. An example is putting an image inside a listbox and when you scroll up and down in the listbox, the image will disappear/hide inside the listbox boundaries.
I have put a bing map object(the one that comes with the windows phone 7 sdk) inside a listbox. When I scroll to where the map is in the listbox, it is acting like I have some flag set to "Always on Top". I can't seem to find a property that is setting this or if it's inherent in the way the maps are designed.
I haven't tried this yet, but I'm curious if I add layers with pushpins in them if they too would act "Always on Top". I've included an image to explain. As you can see below, the map is outside of the listbox's bounding area and is even overlapping a button outside of the listbox.
Link to Map Image
<ListBox Height="590">
<TextBlock IsHitTestVisible="False" Foreground="#F80046" Style="{StaticResource PhoneTextExtraLargeStyle}" TextAlignment="Center" Text="Map"></TextBlock>
<my:Map Width="445" x:Name="EventMap" Margin="0,0,0,20" LogoVisibility="Collapsed" CopyrightVisibility="Collapsed">
<my:Map.CredentialsProvider>
<my:ApplicationIdCredentialsProvider ApplicationId="OMITED"></my:ApplicationIdCredentialsProvider>
</my:Map.CredentialsProvider>
</my:Map>
</ListBox>
I'm not sure what you're trying to accomplish, but this seems like more of a usage of ScrollViewer
<ScrollViewer>
<StackPanel>
<my:Map>
</StackPanel>
</ScrollViewer>
rather than ListBox. But anyway, I couldn't reproduce the problem. Does that button have some custom margins that could be doing that?
Here's the solution file I created to see the problem you have in the image. Note that I wasn't able to reproduce it in the solution.
http://dl.dropbox.com/u/129101/WindowsPhoneApplication1.zip
I have a databound and itemtemplated ListBox:
<ListBox x:Name="lbLista"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Deleteable, Mode=TwoWay}" />
<Label Content="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The ites show fine and they come from an ObservableCollection.
The problem is the scrollbar which appears but is not usable - it does not have a handle to grab. I've tried setting some ScrollView attached properties on ListBox, but they do not affect the situation.
I pasted your code into test project, added about 20 items and I get usable scroll bars, no problem, and they work as expected. When I only add a couple items (such that scrolling is unnecessary) I get no usable scrollbar. Could this be the case? that you are not adding enough items?
If you remove the ScrollViewer.VerticalScrollBarVisibility="Visible" then the scroll bars only appear when you have need of them.
ListBox will try to expand in height that is available.. When you set the Height property of ListBox you get a scrollviewer that actually works...
If you wish your ListBox to accodate the height available, you might want to try to regulate the Height from your parent controls.. In a Grid for example, setting the Height to Auto in your RowDefinition might do the trick...
HTH
I have never had any luck with any scrollable content placed inside a stackpanel (anything derived from ScrollableContainer. The stackpanel has an odd layout mechanism that confuses child controls when the measure operation is completed and I found the vertical size ends up infinite, therefore not constrained - so it goes beyond the boundaries of the container and ends up clipped. The scrollbar doesn't show because the control thinks it has all the space in the world when it doesn't.
You should always place scrollable content inside a container that can resolve to a known height during its layout operation at runtime so that the scrollbars size appropriately. The parent container up in the visual tree must be able to resolve to an actual height, and this happens in the grid if you set the height of the RowDefinition o to auto or fixed.
This also happens in Silverlight.
-em-
Thnaks for answer. I tried it myself too to an Empty Project and - lo behold allmighty creator of heaven and seven seas - it worked. I originally had ListBox inside which was inside of root . For some reason ListBox doesn't like being inside of StackPanel, at all! =)
-pom-