WPF panel header title - c#

I am not sure they correct terminology for a header/title bar of a component in WPF. What I need is a panel/non-floating window, in which I can set the title? I want a few components in a panel that needs a title like Properties and Toolbox in Visual Studio.
As mentioned earlier, this doesn't need to be a floating/docking panel. I don't want GroupBox. I will be adding close button later just to hide the component from the user.

I think, that in WPF visual solutions are limited only by our imagination.
If there isn't the control you want - you can build it.
My simple solution is here:
<Border Visibility="Visible" BorderThickness="2" BorderBrush="Blue" CornerRadius="8" Margin="30,30,30,30">
<StackPanel Margin="3">
<Label Height="25" Content="H e a d e r" Background="LightSkyBlue" />
<Separator Height="5"/>
<Grid>
<!-- content -->
</Grid>
</StackPanel>
</Border>
Changing Visibility="Collapsed" you can hide this "panel".

If you don't need it to undock and float then you can use a HeaderedContentControl.
When you want to add the close button you can template the header presenter to include a button.

Related

Add custom button to Form ControlBox

I want to know how to add additional button to Form ControlBox that is present at image below:
I know in this forum are few similar questions but no single one answered my question. I checked few links and its not that what i expected because its not working at every operating system. I checked those links:
http://www.codeproject.com/Articles/11510/Add-Transparent-Menus-and-XP-Titlebar-Buttons-to-y
http://www.codeproject.com/Articles/10171/Adding-a-Minimize-to-tray-button-to-a-Form-s-capti
Other idea is to change default click event and icon for MaximizeBox because i don't need this one in my app.
Scratch this - just realized it's a Winforms issue.
Kinda lame suggestion, but in WPF I'd do:
Drop the title
<Window> ... WindowStyle="None" ... /<Window>
Then roll my own:
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
<Button HorizontalAlignment="Right" Width="25" Content="Yo!"/>
<Button HorizontalAlignment="Right" Width="20" Content="-"/>
<Button HorizontalAlignment="Right" Width="20" Content="■"/>
<Button HorizontalAlignment="Right" Width="20" Content="X"/>
</StackPanel>
Caveats:
You will have to do a mouse capture to move the window, not difficult but not trivial either. Also change the style of the buttons to look like the regular icons etc
Not ideal I know, but in a pinch ...

WPF custom control - reach element inside, rotate only part of custom control

I have a problem with custom control.
I have a custom controls, where i have 5-8 Paths, what user can "select". Up of those Paths i want to have label (inside custom control), where i can change the content inside (from Window, where i use that custom control).
My XAML of the Custom control looks like:
<FirstMolarTooth ..........>
<DockPanel>
<Label Name="lbl_tooth" DockPanel.Dock="Top" FontSize="10" HorizontalAlignment="Center" />
<Grid DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Path ......./>
</Grid>
</DockPanel>
</FirstMolarTooth>
How can i reach that label inside from window where i use that custom control??
something like:
<local:FirstMolarTooth x:Name="Tooth_15" ........>
<lbl_tooth Content="15" />
</local:FirstMolarTooth>
or
<local:FirstMolarTooth .... Content="15">
</local:FirstMolarTooth>
Second problem is that i rotate the custom control in window where i use it with:
<local:FirstMolarTooth ....>
<local:FirstMolarTooth.LayoutTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="180"/>
</local:FirstMolarTooth.LayoutTransform>
</local:FirstMolarTooth>
My problem is that when i do that (logically), this rotate whole control (with a label). I want to rotate just the Paths and not with the label. I thought that i can do something like custom property for that label "isRotated" and when its setted on true, i should "reset" the rotate (set angle 0) with triggers. But i am not able to do that. (should i reach that custom property from XAML? or only in code? that was maybe the problem i try to reach it from XAML).
I know i can delete the label from custom control and have in there just the Paths and after that rotate just the Paths and the label have in Window. But user can select "whole" custom control (select tooth) and he can select "segment" of tooth (Paths). Therefore i would like to have it everything inside that custom control.
Thanks for any advice.
For your first problem, just bind lbl_tooth against FirstMolarTooth Content property. If that doesn't work, create new dependency property inside FirstMolarTooth(of string) and bind against it. Then you can change that property later outside of custo control.
<FirstMolarTooth x:Name="MOLAR" ..........>
<DockPanel>
<Label Name="lbl_tooth" DockPanel.Dock="Top" FontSize="10" HorizontalAlignment="Center"
Content="{Binding Content, ElementName=MOLAR}" />
<Grid DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Path ......./>
</Grid>
</DockPanel>
For the second problem, just make new dependency property of type DOUBULE that you can set outside. For creating dependency properties, you can either google or search this forum. Millions of answers.
<FirstMolarTooth x:Name="MOLAR" ..........>
<DockPanel>
<Label Name="lbl_tooth" DockPanel.Dock="Top" FontSize="10" HorizontalAlignment="Center"
Content="{Binding Content, ElementName=MOLAR}" />
<Grid DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Path .......>
<Path.LayoutTransform>
<RotateTransform CenterX="0.5" CenterY="0.5"
Angle="{Binding YourNewAngleProperty, ElementName=MOLAR}"/>
</Path.LayoutTransform>
</Path>
</Grid>
</DockPanel>

wpf over activeX

I am trying to overlay buttons on a WindowsFormsHost that contains an activeX control embedding VLC. The issue I have is that activeX is always on top of wpf. Are there any ways to get a wpf control over the activeX control?
The VLC control also does not seem to support rendering to a bitmap.
I finally found a solution. The popup primitive is also an element that is always on top and can be placed over the vlc control. Its a bit of a hack, but it gets the overlay that I needed. My xaml for the player looks like this
<grid>
<WindowsFormsHost x:Name="Host"
Height="200"
Width="200" />
<Border x:Name="Anchor"
Height="0"
Width="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Popup Width="{Binding ElementName=Host,Path=Width}"
Height="{Binding ElementName=Host,Path=Height}"
PlacementTarget="{Binding ElementName=Anchor}"
AllowsTransparency="True"
IsOpen="True">
<Border Background="#30808080"
Width="{Binding ElementName=Host,Path=Width}"
Height="{Binding ElementName=Host,Path=Height}">
<Button Content="Start"
Height="20"
Width="60"
Click="button1_Click"/>
</Border>
</Popup>
</grid>
The above puts a light grey transparent layer over the vlc player that contains a button. The above doesn't account for if the window is resized or moved, but the issue of putting something wpf over the control has been solved.
Short answer: No.
Extracted from MSDN:
In a WPF user interface, you can change the z-order of elements to
control overlapping behavior. A hosted Windows Forms control is drawn
in a separate HWND, so it is always drawn on top of WPF elements.
For the case of VLC, there is VideoLan.Net available at: http://vlcdotnet.codeplex.com/
which allows for video to be output to an Image.

Where is the "ListViewItemPlaceholderBackgroundThemeBrush" located?

I have a problem understanding one style definition in Windows 8 metro apps.
When you create a metro style application with VS, there is also a folder named
Common
created. Inside this folder there is file called
StandardStyles.xaml
Now the following snippet is from this file:
<!-- Grid-appropriate 250 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
What I do not understand here is the static resource definition, e.g. for the Border
Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
It is not about how you work with templates and binding and resources.
Where is this ListViewItemPlaceholderBackgroundThemeBrush located?
Many thanks for your help.
Dimi
In Windows 8 customer preview you can find the file containing the resources' definition (including ListViewItemPlaceholderBackgroundThemeBrush) at:
C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml
This is one of those incredibly frustrating things that should be in Microsoft's documentation, but isn't (yet).
ListViewItemPlaceholderBackgroundThemeBrush is one of the System Brush Resources. It's defined by the Metro "Light" or "Dark" theme (whichever you selected for your app).
You can see the full list of system brushes in Blend. (Unfortunately, I haven't found any way to enumerate them in code. There doesn't seem to be any programmatic way to inspect the theme resources.)
Here are some steps that will get you to the full list. (Of course, you can abbreviate the steps if you're already familiar with Blend.)
Open Expression Blend.
Create a new project, and select XAML (Windows Metro style) > Blank App (XAML) and click OK.
Click in the design surface to select the Grid. (In the "Objects and timeline" docked window in the lower-left, the "[Grid]" line will become highlighted.)
In the Properties docked window in the upper right, find the "Brush" category.
Right below where it says "Background: No brush", there's a row of five buttons. Click the rightmost button ("Brush resources").
The list of system brush resources will appear in the listbox.

Bing Maps Silverlight - Adding tooltips to pins generated in C#

I am attempting to convert a bing map implementation that uses standard PushPins in order to populate the map, but I need to add a tooltip to each pin. I found some options of how to do this on the website but the issue is I need the pushpins to be different from each other in a way that is dynamic. Based on the properties of each pin it must have a different background color.
The code already on this site all has the programmer use an image of the pushpin when they customize it.
So right now I need a way to either create a templated pushpin that is able to maintain the look and properties of a pushpin (so I can set background), while allowing a tooltip. Or instead having a regular pushpin have a tooltip or popup with it.
Any help would be appreciated!
Edited:
Control Template I am using
<ControlTemplate x:Key="NewPins" >
<Grid x:Name="pushPin" >
<Popup IsOpen="False" behaviors:RolloverPopup.HideDelay="0" behaviors:RolloverPopup.Target="{Binding ElementName=pushPin}" Margin="30,-20,0,0" >
<Border Background="White" BorderBrush="Black" CornerRadius="10" BorderThickness="1">
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Title}" Foreground="Black" FontWeight="Bold" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
<TextBlock Text="{Binding Content}" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
</StackPanel>
</Border>
</Popup>
</Grid>
</ControlTemplate>
This is setting up the pin in C#
Pushpin pin = new Pushpin()
{
Location = new Location( Double.Parse(item.PinLat), Double.Parse(item.PinLong)),
Content=String.Concat( GetNewlineString(item.LocationName), GetNewlineString(item.CallerName), GetNewlineString(item.PhoneNumber)),
Template=(ControlTemplate)Application.Current.Resources["NewPins"],
Width = 50,
Height = 65,
};
And this is creating the Bing Map
<c:BingMapAdSmart
AnimationLevel="UserInput"
Pins="{Binding DashboardViewModel.MapPins}"
NavigationVisibility="Visible"
SetViewZoomFactor="0"
MaxZoomLevel="7"
Visibility="{Binding NavViewModel.IsViewTransitioning, Converter={StaticResource TrueToCollapsedConverter}}" />
I may not really understand your question correctly, but i assume you need pushpins that are being created dynamically based on a template right? And you want to be able to change the tooltip (content property i assume) independently.
If thats the case, first you need to put a template resource to your resources in xaml;
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="template_name" TargetType="m:Pushpin">
...this is your design part you can compile this xaml via Expression
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
then you'll need pass this value to every pushpin you've created dynamically codebehind. On this stage you can also set their content property, since they don't have a notification property, i don't know if you mean this but content property is the similar one. You can edit them like you edit other stuff;
myPushPin.template = (ControlTemplate)This.Resources["template_name"];
myPushPin.Content = "Hello World!";
This stage may differ according where you put your resources if its in phone:PhoneApplicationPage.Resources
if you put in Application.Resources
use this;
myPushPin.template = (ControlTemplate)Application.Current.Resources["template_name"];
myPushPin.Content = "Hello World!";
This should work, i don't have bing maps API or WP7 tools installed on this computer so i can't test it but this should be ok.
Happy coding!
Edit:
So if you want to change the background of a pushpin you don't have to hold back, it doesn't matter whether it has a control template or not. Actually every control has one as default. You can change the background as you always do
myPushpin.Background = new SolidColorBrush(Colors.Blue);
I have done exactly what you describe. The way i did this makes the most sense to me. Here is what I did:
I created a custom Pushpin (i.e. UserControl). This Xaml defines my custom pushpin. It assumes this pushpin is to be data-bound to. One of the binded properties is background Color. This will easily satisfy your dynamic color issue.
In the bing map control i defined the following:
The MyPushpinTemplate is defined in the UserControl.Resources like this:
MyPushpinControl is the UserControl.
I also have a data model class (that implements INotifyPropertyChanged). This class is bound to an instance of MyPushpinControl. this data model class has all the properties and is data-binded to the UserControl.
This is technically all you need to know.
To satisfy your tooltip issue, I simply added a tooltip to one of the panels within my custom pushpin. Simple as that.
Until I have a better solution I have decided the only thing I can think to do is to create a number of different pins to use. I don't need an infinite color solution so about 15 different pins should do the trick. Messy but it will work.
I just solved this issue to my complete satisfaction. To accomplish this, you need to have to create a Pushpin style with a key. Then inside this pushpin you create a standard pushpin (you can use another style on that but don't let it look back to this style, I used default), and a popup to go along with it. An example is below, I am using a local tool to do easy rollover popups, otherwise its standard stuff + bind maps.
<Style TargetType="bingMaps:Pushpin" x:Key="NewPins2">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="bingMaps:Pushpin" >
<Grid x:Name="pushPin" >
<Border Width="50" Height="65" >
<bingMaps:Pushpin Background="{TemplateBinding Background}" />
</Border>
<Popup IsOpen="False" behaviors:RolloverPopup.HideDelay="0" behaviors:RolloverPopup.Target="{Binding ElementName=pushPin}" Margin="30,-20,0,0" >
<Border Background="White" BorderBrush="Black" CornerRadius="10" BorderThickness="1">
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Title}" Foreground="Black" FontWeight="Bold" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
<TextBlock Text="{Binding Content}" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" />
</StackPanel>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Categories