CODEWITHSUNDEEP
wpfxamlwpf-controls
Ralf de Kleine
Ralf de Kleine

Reputation: 11734

Create a usercontrol with overlapping content

I need to make a (user/custom) control which when 'folded open' displays content over other controls.

Like a popup, combo or menu except that the content will still open (think toggle button style).

Any leads?

Upvotes: 0

Views: 1426

Answers (2)

Ralf de Kleine
Ralf de Kleine

Reputation: 11734

Simplified description.

Main form

<Window>
  <StackPanel Orientation="Vertical">
    <ToolButton StackPanel.ZIndex="999"/>
    <TextBlock>Other content</TextBlock>
  </StackPanel>
</Window>

You'll need the ZIndex to indicate the overflowing control is on top

Custom control

<UserControl x:Class="ToolButton" Height="32">
  <Canvas>
    <ToggleButton x:Name="button">
      <TextBlock>Content</TextBlock>
    </ToggleButton>
    <TextBlock Canvas.Top="32" Visibility="{Binding ElementName=button, Path=IsChecked, Converter={converter:BooleanToVisibility}}">Popup</TextBlock>
  </Canvas>
</UserControl>

Bool to visibility Converter

  public sealed class BooleanToVisibility : MarkupExtension, IValueConverter
  {
    public BooleanToVisibility() { }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      var flag = false;
      if (value is bool)
      {
        flag = (bool)value;
      }
      else if (value is bool?)
      {
        var nullable = (bool?)value;
        flag = nullable.GetValueOrDefault();
      }
      if (parameter != null)
      {
        if (bool.Parse((string)parameter))
        {
          flag = !flag;
        }
      }
      if (flag)
      {
        return Visibility.Visible;
      }
      else
      {
        return Visibility.Collapsed;
      }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      var back = ((value is Visibility) && (((Visibility)value) == Visibility.Visible));
      if (parameter != null)
      {
        if ((bool)parameter)
        {
          back = !back;
        }
      }
      return back;
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
      return this;
    }
  }

Upvotes: 2

stukselbax
stukselbax

Reputation: 5935

Depends on many issues.

I know at least two ways to achive it. First - using <Popup />. Its easy to bind its IsOpen property to bool variable. And if you need to close it, I have got some smart behavior (which close popup when Esc key is pressed or when it lost focus).

The second way is to have a <ContentControl /> which have a style, which have a trigger, which changing ContentTemplate depending on what ever you want:

<ContentControl Grid.Row="3" Grid.ColumnSpan="2" Grid.RowSpan="2" Content="{Binding}">
    <ContentControl.Style>
        <Style>
            <Setter Property="ContentControl.ContentTemplate" Value="{StaticResource OneTemplate}"/>
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Property1}" Value="False"/>
                        <Condition Binding="{Binding Property2}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="ContentPresenter.ContentTemplate" Value="{StaticResource TwoTemplate}"/>
                 </MultiDataTrigger>
              </Style.Triggers>
          </Style>
       </ContentControl.Style>
   </ContentControl>

I believe that there are exists many more possible ways to solve your problem!

Upvotes: 4

Related Questions