I have a textbox that I would like to combine with a listbox in such a way that when the user types into the textbox, certain items will appear in the listbox, and the user may select them from there. What I am looking for is behaviour similar to that of the AutoCompleteBox. Sadly, I can't use the existing AutocompleBox in my project for several reasons, so I am trying to come up with similar behaviour on my own. Any ideas?
EDIT:
I would like to avoid using the tooltip as this seems like a hack. Also, when the listbox is displayed, no layouts should be changed either in the control or elsewhere. Is there something like the CSS style overflow available?
OK, it looks like "Popup" is what I am looking for. It's got some of its own quirks, but so far it is working just fine. I am pretty much using it like this..
<DockPanel>
<TextBox Text="{Binding Value}"/>
<Popup Name="popOptions" Width="300" Height="100" AllowsTransparency="True" StaysOpen="False">
<ItemsControl ClipToBounds="False" Background="White" MouseLeftButtonUp="ItemsControl_MouseLeftButtonUp">
<sys:String>ITEM ONE</sys:String>
<sys:String>ITEM TWO</sys:String>
<sys:String>ITEM THREE</sys:String>
</ItemsControl>
</Popup>
</DockPanel>
I am capturing other control events to decide when, and when not to display it.
You could put the ListBox in the TextBox's ToolTip
I'm not sure if that's the best way of doing what you're trying to accomplish, but it will work to make a floating listbox
Related
sorry if this question is overly simple, but I'm having a hard time figuring out how to create backgrounds to controls - in the hopes that it will improve app performance.
I have 9 different controls. All of them have a background. The backgrounds are made up of either images, other controls or both. All of those backgrounds have another background.
Think of this like Power Point with slides, slide layouts and slide masters - inherited in that order. I have 9 slides / controls.
The first 3 controls have the same "control layout" (let's call it
ControlLayout1). ControlLayout1 gets some of it's elements from ControlMaster1.
The second 3 controls also have the same control layout, but it is
different from the first. Let's call it ControlLayout2. It also
inherits from ControlMaster1.
The final set of 3 controls are different again. We can call them
ControlLayout3. But this time, they inherit from a different master - ControlMaster2.
Right now in each control I'm writing out all the XAML each time separately. I'm thinking there must be a way to not write these in each of these each item. Ideally, what I would like to create is one set of XAML that can be reused.
Here's some pseudo-XAML:
<UserControl x:Name="Control1">
<MyBackground (ControlLayout1)/>
</UserControl>
<UserControl x:Name="Control2">
<MyBackground (ControlLayout2)/>
</UserControl>
<UserControl x:Name="Control3">
<MyBackground (ControlLayout3)/>
</UserControl>
And then somewhere for ControlLayouts (I don't know, like Application.Resources or elsewhere)
<Canvas x:Name="ControlLayout1">
<MyMasterBackground (ControlMaster1)/>
</Canvas>
<Canvas x:Name="ControlLayout2">
<MyMasterBackground (ControlMaster1)/>
<TextBox Text="The Control 2">
</Canvas>
<Canvas x:Name="ControlLayout3">
<MyMasterBackground (ControlMaster2)/>
<TextBox Text="The Control 3">
</Canvas>
And then for the ControlMasters
<Canvas x:Name="ControlMaster1">
<Canvas.Background>
<ImageBrush ImageSource="/Images/image1.jpg" />
</Canvas.Background>
</Canvas>
<Canvas x:Name="ControlMaster2">
<Canvas.Background>
<ImageBrush ImageSource="/Images/image2.jpg" />
</Canvas.Background>
<TextBox Text="Control Master 1">
</Canvas>
Once defined, the ControlLayouts and ControlMasters never need to change - they are static.
Beyond just having a smaller XAP if I can put these all in one location and reuse the XAML, I'm hoping performance will be improved in my app as the ControlLayouts automatically get BitmapCached or something like that.
So first, is there a good strategy to implement the above (the ControlLayouts and Masters do not have any code-behind)? Secondly will performance be improved in loading of Control1, Control2, etc.? Finally, if they were pure usercontrols (i.e. they had some code behind), would that be better for performance?
Thanks in advance!
What you ask for is a combination of a few things:
About the Background thing: just create a dependency property (let's call it MyBackgroundDP) of type Brush in the code behind of a UserControl, and bind it to your XAML like:
<UserControl ...>
<Grid Background={"Binding MyBackgroundDP, RelativeSource={RelativeSource Mode=FindAncestor, AncestoryType=UserControl}}">
<!-- More XAML declarations -->
</Grid>
</UserControl>
To create the dependency property, you can use the built in snippet in visual studio: propdp
Simply write "propdp" and that TAB twice. Fill up the fields and it's all good.
Alright so that was easy enough, right? ;)
Now the tougher part: making so-called master pages.
Actually it's not that much different from the background thing.
Declare another dependency property, only this time of type object, or FrameworkElement (better).
Then in your XAML, you declare a kind of placeholder: ContentControl. Let's call it MyContentDP for this example:
<UserControl ...>
<Grid Background={"Binding MyBackgroundDP, RelativeSource={RelativeSource Mode=FindAncestor, AncestoryType=UserControl}}">
<ContentControl ContentTemplate="{Binding MyContentDP, RelativeSource={RelativeSource Mode=FindAncestor, AncestoryType=UserControl}}" />
</Grid>
</UserControl>
You can then fine tune whatever else you want to provide in this "master view", add a border around the Grid, put some flowers, you name it.
Once you're done, this is how you use it, assuming it was called MyUserControl
<Window ...
xmlns:local="...reference_to_your_usercontrol_dll/exe">
<Grid>
<local:MyUserControl MyBackgroundDP="Red">
<local:MyUserControl.MyContentDP>
<!-- More XAML declarations here -->
</local:MyUserControl.MyContentDP>
</local:MyUserControl>
</Grid>
</Window>
Now the performance point:
If you put all the XAML for this as a Custom control (which is DIFFERENT from a UserControl), you can then put all the XAML in your App.xaml
Why? because parsing XAML can be an intensive operation, and if you make WP7/SL parse it at runtime whenever you need it, you lose performance.
Instead, your App.xaml gets parsed at startup, then it's in memory. That's what's done in the loading of your application. You would get a performance boost, although it would be minimal for controls made of few XAML, it is still a good practice.
Hope this helps,
Bab.
I have several pushpins on the map. When i hover with my mouse over the pushpins i get a dialogbox with some information in it. Now i also want some additional information when i click on the same pushpin. But i can't really figure out how to do this. I tried some things but it didn't work...
This is my code:
<bing:MapItemsControl ItemsSource="{Binding Items}">
<bing:MapItemsControl.ItemTemplate>
<DataTemplate>
<bing:Pushpin bing:MapLayer.Position="{Binding Location}" Background="{Binding Color, Converter={StaticResource brushConverter}}">
<ToolTipService.ToolTip>
<StackPanel>
<TextBlock Text="{Binding Address}" />
<TextBlock Text="{Binding Description}" />
</StackPanel>
</ToolTipService.ToolTip>
</bing:Pushpin>
</DataTemplate>
</bing:MapItemsControl.ItemTemplate>
</bing:MapItemsControl>
</bing:Map>
Has somebody tried to do this or know how to do this, by far thanks!
I know this is an old question, but maybe it will shine a little light on the right solution, and help someone else, if not you.
As I understand, the Tooltip stuff is already working, you just want to handle the clicks.
So here are some suggestions:
1 - The novice solution:
You can handle the event from the code behind. Since only Buttons have the Click event, you can't use that, but I think MouseLeftButtonDown, or even better MouseLeftButtonUp are equally good for this. Of course, if you have different maps on different controls, you will have to repeat this code on every one of them.
2 - The advanced solution:
Use Behaviors! They are like tiny extensions that can cling on to controls and extend their functionality. In your place, I would put a Behavior on the Pushpins, that would open a panel to display the info you want. You can read more about this topic under the link above!
<Border BorderBrush="#C4C8CC" BorderThickness="0,0,0,1">
<TextBlock x:Name="SectionTitle" FontFamily="Trebuchet MS" FontSize="14" FontWeight="Bold" Foreground="#3D3D3D" />
</Border>
I have to use the same above format at many places in a single xaml page, so for this i created a usercontrol and defined the above code inside it.
So my question is,
What i am doing is it right approach?
Will it make the page to load slower then the above code used as it is without defining it in a new user control?
I doubt you would notice a difference. However a lighter and more flexiable approach would be to use a Templated Control instead of a UserControl. Its a little more technical but results in a tighter implementation.
How many is "many" anyhow?
In Windows Forms the default behaviour of a TabControl is to have the tabs spill out to a scrollable area if they consume too much space (MultiLine = false).
What is the best approach to achieving this behavior in WPF?
UPDATE
I was trying to find a solution using TabControl.ItemsPanel but it seems anything I put in there gets completely ignored, so for this reason I've gone the hard way and started with TabControl.Template which is mind boggling that we have to do it this way if it turns out to be the correct approach.
Extremely far from being complete, my starting solution to the problem is as follows.
<TabControl>
<TabControl.Template>
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel>
<ScrollViewer DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ScrollViewer>
<ContentPresenter ContentSource="SelectedContent" />
</DockPanel>
</ControlTemplate>
</TabControl.Template>
<TabItem Header="One">First</TabItem>
<TabItem Header="Two">Second</TabItem>
<TabItem Header="Three">Third</TabItem>
<TabItem Header="Four">Fourth</TabItem>
<TabItem Header="Five">Fifth</TabItem>
</TabControl>
In working to make a TabControl where the tabs are stacked vertically along the left, I found this solution for you:
http://www.blogs.intuidev.com/post/2010/02/10/TabControlStyling_PartThree.aspx
Pretty impressive stuff!
Your solution to replace the template seems to be the best way to do this. The default panel for the TabItems is a TabPanel, and I don't see anything like a "should wrap" property on it.
The documentation contains an example of replacing the TabControl template with a different TabPanel:
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.tabpanel.aspx
i had the same problem few years ago, my solution was to limit the size of the header, and the panel that contains it, of course you need to make your own template like what you started, and also i need to implement some scrolling support so i put two repeat buttons at the left and right side of the scroll viewer.
my inspiration was a nice project from code project called IE tabs in wpf.
it's old as wpf and works good
I know this is an older post, but I wanted to add another idea should others be searching this on the internet.
If you set the width of the tabpanel to something larger it will be (assuming this is not a tabpanel that allows the user to continue to add other tabs in it). If you have the user adding new tabs to the tab panel, then a scroll bar will need to be added.
the easiest option is to set the ItemsPanelTemplate on the TabControl. I think the default is WrapPanel, hence the Multiline behaviour.
Change it to StackPanel for example and maybe add a ScrollViewer.
Something like this (just coding this without VS)
<TabControl>
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
</TabControl>
hope that helps a bit...
Hey guys, I've got what I think is an interesting question:
You all know and love the Skype chat interface: each message is enclosed in a bubble, with emoticons and link capabilities, as well as an avatar at the left.
What is the most ideal WPF component to house each message in, if I were creating a Skype-like interface?
I am using MVVM, so all my messages are stored in the ViewModel as an ObservableCollection.
I have had problems binding to a RichTextBox, and so I have investigated binding to a Listbox, where each list item is a message and each item is styled to have a Skypey border and avatar etc.
Any ideas?
The only suitable solution that I have found is using the flowdocumentreader and an ivalueconverter to convert an array of strings to a flowdocument. It actually works great once I made my own scripting language similar to bbcode.
This was the sample I learned from. http://michaelsync.net/2009/06/09/bindable-wpf-richtext-editor-with-xamlhtml-convertor
It was a little overkill for me so I ended up just making the ivalueconverter and a simple script language.
The solution i see is that you should use DataTemplate and Style. The idea is following: each text message represented by class object. Now when you bind your message inside template, you explicit tell how do you want your messages will look like.
It will better for you to create a usercontrol that will know how represent your messages.
Example that represent similar idea, but idea is the same:
<Window.Resources>
<DataTemplate DataType="{x:Type model:MessageModel}">
<ed:Callout AnchorPoint="0,1.5" Margin="10" CalloutStyle="RoundedRectangle" Content="{Binding Path=Text}" Fill="#FFF4F4F5" FontSize="14.667" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="200" />
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl ItemsSource="{Binding Path=MsgList}" />
</Grid>
For that example you need attach Microsoft.Expression.Drawing.sll which come aside with Blend 4.