Hello and thanks for the help. I have a Treeview that I am populating with a Hierarchical data template, and currently the bottom nodes have a tooltip that generates a small stack panel that is populated with data specific to the item the mouse hovers over. I also have a button sitting in the tooltip, however, as the tooltip does not persist when the mouse moves over it, I am unable to make use of the button like I need to. My xaml looks like this:
<!--=========================== Hierarchical Data template for tree view -->
<!--template for bottom nodes-->
<sdk:HierarchicalDataTemplate x:Key="ModTemplate" ItemsSource="{Binding ApplicationModules}">
<StackPanel Orientation="Horizontal" > <!--======tooltip style to handle format for callout window============-->
<ToolTipService.ToolTip>
<ToolTip HorizontalOffset="0" VerticalOffset="0" Style="{StaticResource ModuleToolTipStyle}">
<StackPanel Width="150" Height="auto" >
<TextBlock Text="Module Info" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock Text="Module State:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleState}" />
<TextBlock Text="Module Start Time:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleStartTime}"/>
<TextBlock Text="Module Down Time:" FontWeight="Bold"/>
<TextBlock Text="{Binding Path=ModInfo.ModuleDownTime}" />
<Button Content="More Info" Width="75"></Button>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
<!--============end tooltip style for callout window===================-->
<ContentPresenter Margin="0 0 4 0" Content="{Binding Icon}" />
<TextBlock FontStyle="Italic" Text="{Binding Path=ModuleName}" />
</StackPanel>
</sdk:HierarchicalDataTemplate>
I would like the tooltip to persist when the mouse moves over it so that I can wire an event to the button. How can I achieve this? Thanks again for the help.
You have a couple options to accomplish your goal that I'm aware of. You can go check out the Silverlight Advanced Tooltips project over on codeplex which does what you want (though I personally have not used it so can't give any kind of review.)
Or you can make your own with some creativity. If it were me I would probably skip all that mess, forget the ToolTipService all together and just make my own to dress it up since to a user, what you're providing isn't what they're used to in terms of a tooltip expectation anyway and have cross more over to a callout or popout functionality. I can make an example as soon as I get some freed up time if option #1 doesn't work for you but I hope it does. Essentially both my way, and that project link I provided would do the same thing, which is provide a delay after the MouseLeave event of what it's attached to so the user can get to it before it disappears. Then hand off its visibility condition to that object. Let me know if this doesnt work and I can give you an alternative example using nothing but XAML.
Related
This may be a no-brainer for the WPF cognoscenti, but I'd like to know if there's a simple way to put text on the WPF ProgressBar. To me, an empty progress bar looks naked. That's screen real estate that could carry a message about what is in progress, or even just add numbers to the representation. Now, WPF is all about containers and extensions and I'm slowly wrapping my mind around that, but since I don't see a "Text" or "Content" property, I'm thinking I'm going to have to add something to the container that is my progress bar. Is there a technique or two out there that is more natural than my original WinForms impulses will be? What's the best, most WPF-natural way to add text to that progress bar?
Both of the prior responses (creating a new CustomControl or an Adorner) are better practices, but if you just want quick and dirty (or to understand visually how to do it) then this code would work:
<Grid Width="300" Height="50">
<ProgressBar Value="50" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
My Text
</TextBlock>
</Grid>
Just keep in mind that the z-index is such that the last item listed will be on top.
Also, if you don't have Kaxaml yet, be sure to pick it up - it is great for playing with XAML when you're trying to figure things out.
This can be very simple (unless there are alot of ways getting this to work).
You could use Style to get this done or you just overlay a TextBlock and a ProgressBar.
I personally use this to show the percentage of the progress when waiting for completion.
To keep it very simple I only wanted to have one Binding only,
so I attached the TextBock.Text to the ProgressBar.Value.
Then just copy the Code to get it done.
<Grid>
<ProgressBar Minimum="0"
Maximum="100"
Value="{Binding InsertBindingHere}"
Name="pbStatus" />
<TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
Here is how this could look like:
Check out WPF Tutorial for the full post.
If you are needing to have a reusable method for adding text, you can create a new Style/ControlTemplate that has an additional TextBlock to display the text. You can hijack the TextSearch.Text attached property to set the text on a progress bar.
If it doesn't need to be reusable, simply put the progress bar in a Grid and add a TextBlock to the grid. Since WPF can compose elements together, this will work nicely.
If you want, you can create a UserControl that exposes the ProgressBar and TextBlock as public properties, so it would be less work than creating a custom ControlTemplate.
You could use an Adorner to display text over top of it.
See MSDN article on Adorners
You would create a class that inherits from the Adorner class. Override the OnRender method to draw the text that you want. If you want you could create a dependency property for your custom Adorner that contains the text that you want to display. Then use the example in the link I mentioned to add this Adorner to your progress bar's adorner layer.
ProgressBar with Text and Binding from 2 Properties ( Value/Maximum value ):
<Grid>
<ProgressBar Name="pbUsrLvl"
Minimum="1"
Maximum="99"
Value="59"
Margin="5"
Height="24" Foreground="#FF62FF7F"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Text>
<MultiBinding StringFormat="{}UserLvl:{0}/{1}">
<Binding Path="Value" ElementName="pbUsrLvl" />
<Binding Path="Maximum" ElementName="pbUsrLvl" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
Rezult:
The same but with % of progress :
<Grid>
<ProgressBar Name="pbLifePassed"
Minimum="0"
Value="59"
Maximum="100"
Margin="5" Height="24" Foreground="#FF62FF7F"/>
<TextBlock Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
Right click ProgressBar, and click Edit Template > Edit a Copy.
Then put the TextBlock as shown below just above the closing tag of Grid in the Style generated by VS.
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
<TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
This is based on the given answers.
Since I´m using MahApps Metro, I ended up with this:
<Grid>
<metro:MetroProgressBar x:Name="pbar" Value="50" Height="20"></metro:MetroProgressBar>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>
If you want to use the normal bar with Metro Style:
<Grid>
<ProgressBar x:Name="pbar" Value="50" Height="20" Style="{StaticResource MetroProgressBar}"></ProgressBar>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>
Same without Style:
<Grid>
<ProgressBar x:Name="pbar" Value="60" Height="20" Style="{x:Null}"></ProgressBar>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>
What is Happening?
You have your progressbar and simply just lay text over it.
So you just use your progressbar as you would.
Put the progressbar in a grid and lay an textblock in it.
Then you can text as you wish or grab the current percenteage wich is the value from the progressbar.
i am trying to do some people administration application and i would like to use own component. I have a listBox with actions and i would like to show people who are in list in selected action. There is no problem for me to show just their names in another list, but i would like to have a pane where would be a card (my component) for every person asociated with that action. That card should look like
<WrapPanel HorizontalAlignment="Left" Height="296" Margin="668,59,0,0" VerticalAlignment="Top" Width="230">
<Image x:Name="image" Height="124" Width="226"/>
<TextBlock x:Name="textBlock_Copy5" TextWrapping="Wrap" Text="Name: " FontSize="18"/>
<TextBox x:Name="textBox_Copy2" Height="25" TextWrapping="Wrap" Width="151"/>
<TextBlock x:Name="textBlock_Copy6" TextWrapping="Wrap" Text="Surname: " FontSize="18"/>
<TextBox x:Name="textBox_Copy3" Height="25" TextWrapping="Wrap" Width="145"/>
<TextBlock x:Name="textBlock_Copy7" TextWrapping="Wrap" Text="Birthday: " FontSize="18"/>
<DatePicker Width="136" DisplayDate="2016-06-27" DisplayDateStart="1950-01-01" FirstDayOfWeek="Monday" SelectedDate="{Binding Selected.DatumOdjezdu}"/>
</WrapPanel>
So there are two problems for me.
How to create own component.
How to create a pane(it can be scrollable), where would be as many those cards as needed.
Thanks for any hint.
WPF offers more than one way to achieve your goal.
It depends on your Application, what fits your needs the most.
You can reach this by
DataTemplates
UserControl
CustomControl
Here some more Info about the Differences of UserControl and CustomControl
Depending on your posted Code, i'd suggest a DataTemplate in your case.
I am trying to figure out how to have two columns of different binded data on one page. The left column for sounds the right for a save ringtone task for each sound.
I can't put two longlistselectors on one page, it wont let me.
Using a sample, its easy to see how to used binded data for the sound. And the great thing is you only have to enter new code into the binded items and it automatically populates each page with new sound tiles.
Id like to add a save ringtone tile that would essentially work the same way. But it would only make sense if I can get the save ringtone tiles next to the sound tiles on the same page.
Is there any way to do this? All I really need to know, I think, is how to get two columns of different data bindings onto the same page, hopefully in a longlistselector so it will scroll.
Here is a sample of the code im using now.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="SoundTileDataTemplate">
<Grid Background="{StaticResource PhoneAccentBrush}"
Margin="0,0,135,0">
<Grid VerticalAlignment="Top"
HorizontalAlignment="right"
Width="40"
Height="40"
Margin="0, 6, 6, 0">
<Ellipse Stroke="{StaticResource PhoneForegroundBrush}"
StrokeThickness="3"/>
<Image Source="/Assets/AppBar/Play.png" />
</Grid>
<StackPanel VerticalAlignment="bottom">
<TextBlock Text="{Binding Title}"
Margin="6,0,0,6"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="{Binding Path=LocalizedResources.ApplicationTitle,
Source={StaticResource LocalizedStrings}}">
<!--Pivot item one-->
<phone:PivotItem Header="{Binding Animals.Title}">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0"
ItemsSource="{Binding Animals.Items}"
LayoutMode="List"
ItemTemplate="{StaticResource SoundTileDataTemplate}"
SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>
Easy solution.
<DataTemplate x:Key="NewItemTemplate">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" Width="56">
<CheckBox x:Name="CheckBox1" HorizontalAlignment="Left" IsChecked="{Binding Checked, Mode=TwoWay}" BorderBrush="Black" Style="{StaticResource CheckBoxStyleGrey1}" Width="90" Height="74" />
</StackPanel>
<StackPanel Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" Width="803" >
<StackPanel.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</StackPanel.RenderTransform>
<TextBlock Text="{Binding lItem}" Foreground="Black" FontSize="45" Margin="-176,0,0,0" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="{Binding lCategory}" Foreground="Black" Margin="-146,0,-2,0" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
Edit the ItemTemplate based on your needs, and you might have to play around with it in blend if there is an error. In Blend, go to your long list selector and edit the item template.
First of all, by aiming to add 2 long list selectors next to each other, you are approaching to this problem from a very wrong perspective. That's bad for the user, bad for UX, bad for the sake of UI design and bad for the unicorns.
You are trying to associate a functionality (Save ringtone) within another LongListSelector, to the corresponding Item in another Long List Selector. What an earth made you think that adding another Long List Selector and populating it with many Save Ringtone buttons is going to solve your problem? For a second, let's say you somehow achieve adding two Long List Selectors next to each other and deployed your items on the left selector and save ringtone buttons on the right. How you are planning to correctly associate them when they are scrolled? User will scroll the left one and the right Long List Selector will remain static.
You shouldn't add one more Long List Selector to your front. Instead you should go and modify your ItemTemplate in one Long List Selector. Then you will be able to have more than one tile, button, text or whatever you need for one single LongListSelector Item.
ItemTemplate="{StaticResource SoundTileDataTemplate}"
I am not going to submit a solution to add more than one button/tile/text for one LongListSelector item and associate their communication/functionality. Because there are already some 5 million example on the internet about this.
I highly recommend reading Design Guidelines for Windows Phone for you. Because you have such ideas that will result as one more crappy app on the Store. People really got enough of crappy apps. So please either completely stop developing apps for Windows Phone or give a break to whatever you are doing now and go read the design principles.
I'm using DragDropListBoxTarget control from Silverlight Toolkit to support the drag and drop behavior. But I'm facing with a problem with this control.
It's hard to get hold of target element on which the item is dropped. It is a must to have thing in ItemDroppedOnTarget event arguments.
When I drag an item, I need when the user drops it, an intermediate event should modify the target Item. But I can't find the way to implement it.
Am I using the right control, or what another alternatively do I have?
I had the same problem. I ended up using this drag-drop tool. I recompiled the source for Silverlight 5. It lets me know the target. I was also lazy and still wanted the ghost-drag pic of whatever you're dragging when using the toolkit DragDropTarget controls, so I kept my source wrapped in that and also wrapped in the new drag-drop tool.
The way I defined the dragging:
<toolkit:ListBoxDragDropTarget AllowedSourceEffects="Copy">
<ListBox ItemsSource="{Binding Path=UnitOfWork.Templates}" Width="130" Height="360" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<dd:DragSource>
<TextBlock Text="{Binding Path=Name}" Width="120"/>
</dd:DragSource>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</toolkit:ListBoxDragDropTarget>
<dd:DropTarget Grid.Row="2" AllowDrop="True" OnDropped="Target_OnDropped">
<Border BorderBrush="Black" BorderThickness="1" Width="98" Height="30">
<TextBlock Text="Drop Here" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</dd:DropTarget>
This way keeps the dragging ghost that the ListBoxDragDropTarget creates, while allowing me to use the dd:DragSource and dd:DropTarget controls to allow finer-grained drag-drops.
I have a bunch (currently) HyperlinkButtons on my main web page. I want to have 2 versions for the image of each button: selected and unselected. This way when the users enters a page the corresponding button will change to the "selected" image.
Here is an image of what I want to accomplish:
This seems to me like something trivial, but so far I have been running into a stone wall.
I would prefer to do everything from the XAML (but I will be grateful for any solution).
Here is a little of my XAML:
<ScrollViewer x:Name="NavScrollViewer" Margin="-5,12,5,-12" ScrollViewer.VerticalScrollBarVisibility="Visible" IsEnabled="True"
Style="{StaticResource ContentViewerStyle}">
<StackPanel x:Name="ToolboxPanel" Orientation="Vertical" d:LayoutOverrides="Width" Height="Auto">
<HyperlinkButton x:Name="DashboardButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/Dashboard"
Height="50"
/>
<TextBlock Text="Dashboard" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ConfigurationButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/CRSConfiguration"
Height="50"
/>
<TextBlock Text="Configuration" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ScanEnginestionButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/ScanEngines"
Height="50"
/>...
You need to have a toggle button and set its IsChecked property to toggle among its visual states. You may go through this post Using Toggle Button