Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Instead of using custom Windows and positioning, you could use a Popup control. Your can use the <code>StaysOpen=false</code> setting to have it close when the user clicks off-screen.</p> <p>If you can settle for clicking a menu item instead of hovering, the following custom control will work:</p> <pre><code>[TemplatePart(Name="PART_HoverArea", Type=typeof(FrameworkElement))] [TemplatePart(Name="PART_Popup", Type=typeof(Popup))] public class MegaMenuItem : HeaderedContentControl { private FrameworkElement hoverArea; private Popup popup; public override void OnApplyTemplate() { base.OnApplyTemplate(); // Unhook old template if (hoverArea != null) { hoverArea.PreviewMouseUp -= ShowPopupOnMouseDown; } hoverArea = null; popup = null; if (Template == null) return; // Hook up new template hoverArea = (FrameworkElement)Template.FindName("PART_HoverArea", this); popup = (Popup)Template.FindName("PART_Popup", this); if (hoverArea == null || popup == null) return; hoverArea.PreviewMouseUp += ShowPopupOnMouseDown; } private void ShowPopupOnMouseDown(object sender, MouseEventArgs e) { popup.PlacementTarget = hoverArea; popup.Placement = PlacementMode.Bottom; popup.StaysOpen = false; popup.IsOpen = true; } } </code></pre> <p>You would need a style to display it - something like this. Note the PART_ template part names:</p> <pre><code>&lt;Style TargetType="WpfApplication14:MegaMenuItem"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="WpfApplication14:MegaMenuItem"&gt; &lt;Grid&gt; &lt;Border Name="PART_HoverArea" Background="#fb9c3b" BorderBrush="White" BorderThickness="0,0,1,0"&gt; &lt;ContentPresenter Content="{TemplateBinding Header}" /&gt; &lt;/Border&gt; &lt;Popup Name="PART_Popup" PlacementTarget="{Binding ElementName=HoverArea}" &gt; &lt;Border MinWidth="100" MaxWidth="400" MinHeight="40" MaxHeight="200" Background="#0d81c3"&gt; &lt;ContentPresenter Content="{TemplateBinding Content}" /&gt; &lt;/Border&gt; &lt;/Popup&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>The XAML for your menu would then be:</p> <pre><code>&lt;StackPanel Orientation="Horizontal" VerticalAlignment="Top"&gt; &lt;WpfApplication14:MegaMenuItem Header="Parent 1"&gt; &lt;WrapPanel Margin="5"&gt; &lt;TextBlock Text="Put any content you want here" Margin="5" /&gt; &lt;TextBlock Text="Put any content you want here" Margin="5" /&gt; &lt;TextBlock Text="Put any content you want here" Margin="5" /&gt; &lt;/WrapPanel&gt; &lt;/WpfApplication14:MegaMenuItem&gt; &lt;WpfApplication14:MegaMenuItem Header="Parent 2"&gt; &lt;WrapPanel Margin="5"&gt; &lt;TextBlock Text="Put any content you want here" Margin="5" /&gt; &lt;TextBlock Text="Put any content you want here" Margin="5" /&gt; &lt;TextBlock Text="Put any content you want here" Margin="5" /&gt; &lt;/WrapPanel&gt; &lt;/WpfApplication14:MegaMenuItem&gt; &lt;/StackPanel&gt; </code></pre> <p>Making the menu appear on hover is much harder, because of the way Popups steal focus (you can show the menu, but you can't easily hide it if they mouse over another menu). For that a custom window might work better.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload