Skip to content

Instantly share code, notes, and snippets.

@sm-abdullah

sm-abdullah/ResizeDialoghost.xml

Created February 3, 2017 10:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sm-abdullah/c7fed9a915d1cf2258d792a30c13a873 to your computer and use it in GitHub Desktop.
Save sm-abdullah/c7fed9a915d1cf2258d792a30c13a873 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ResizeDialoghost.xml
<Style x:Key="dialgoResisze" TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter Content="{TemplateBinding Content}"/>
<Control x:Name="Top">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Height="1" Opacity="0.5" Margin="03" Cursor="SizeNS" VerticalAlignment="Top"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Control x:Name="Left">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Width="1" Opacity="0.5" Margin="03" Cursor="SizeWE" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Control x:Name="Right">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Width="1" Opacity="0.5" Margin="03" Cursor="SizeWE" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Control x:Name="bottom">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Height="1" Opacity="0.5" Margin="03" Cursor="SizeNS" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Control x:Name="rigtTop">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Width="7" Opacity="0.2" Height="7" Margin="03" Cursor="SizeNESW" VerticalAlignment="Top" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Control x:Name="resizer">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Width="7" Opacity="0.2" Height="7" Margin="03" Cursor="SizeNWSE" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Control x:Name="leftBottom">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Width="7" Opacity="0.2" Height="7" Margin="03" Cursor="SizeNESW" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
<Control x:Name="leftTop">
<Control.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid Margin="-3">
<wmcwpf:ResizeThumb Width="7" Opacity="0.2" Height="7" Margin="03" Cursor="SizeNWSE" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Control.Style>
</Control>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type materialDesign:DialogHost}">
<Setter Property="DialogMargin" Value="22" />
<Setter Property="materialDesign:ShadowAssist.ShadowDepth" Value="Depth5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="materialDesign:DialogHost">
<Grid x:Name="DialogHostRoot" Focusable="False">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PopupStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Closed" To="Open">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_Popup" Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame Value="True" KeyTime="0" />
</BooleanAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentCoverGrid" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame Value="0" KeyTime="0" />
<EasingDoubleKeyFrame Value="0.56" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_PopupContentElement" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame Value="0" KeyTime="0" />
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CardScaleTransform" Storyboard.TargetProperty="ScaleX">
<EasingDoubleKeyFrame Value="0" KeyTime="0" />
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CardScaleTransform" Storyboard.TargetProperty="ScaleY">
<EasingDoubleKeyFrame Value="0" KeyTime="0" />
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Open" To="Closed">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_Popup" Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0" />
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0.3" />
</BooleanAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentCoverGrid" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame Value="0.56" KeyTime="0" />
<EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_PopupContentElement" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame Value="1" KeyTime="0" />
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.18" />
<EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CardScaleTransform" Storyboard.TargetProperty="ScaleX">
<EasingDoubleKeyFrame Value="1" KeyTime="0" />
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.18" />
<EasingDoubleKeyFrame Value="0.5" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CardScaleTransform" Storyboard.TargetProperty="ScaleY">
<EasingDoubleKeyFrame Value="1" KeyTime="0" />
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.18" />
<EasingDoubleKeyFrame Value="0.5" KeyTime="0:0:0.3">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Open">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_Popup" Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame Value="True" KeyTime="0" />
</BooleanAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="PART_ContentCoverGrid" Storyboard.TargetProperty="Opacity"
Duration="0"
To=".56" />
<DoubleAnimation Storyboard.TargetName="PART_PopupContentElement" Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="CardScaleTransform" Storyboard.TargetProperty="ScaleX"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="CardScaleTransform" Storyboard.TargetProperty="ScaleY"
Duration="0"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_Popup" Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0" />
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0.3" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<controlzEx:PopupEx IsOpen="False"
PlacementTarget="{Binding ElementName=DialogHostRoot, Mode=OneWay}"
StaysOpen="True"
AllowsTransparency="True"
PopupAnimation="None"
x:Name="PART_Popup"
Placement="Center">
<controlzEx:PopupEx.Resources>
<!--<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>-->
</controlzEx:PopupEx.Resources>
<materialDesign:Card x:Name="PART_PopupContentElement"
Margin="{TemplateBinding DialogMargin}"
UniformCornerRadius="4"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Foreground="{DynamicResource MaterialDesignBody}"
FontFamily="{StaticResource MaterialDesignFont}"
Focusable="False"
IsTabStop="False"
Opacity="0"
RenderTransformOrigin=".5,.5"
ContentTemplate="{TemplateBinding DialogContentTemplate}"
ContentTemplateSelector="{TemplateBinding DialogContentTemplateSelector}"
ContentStringFormat="{TemplateBinding DialogContentStringFormat}">
<ContentControl Style="{StaticResource dialgoResisze}" Content="{TemplateBinding DialogContent}"/>
<materialDesign:Card.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="CardScaleTransform"
ScaleX="0"
ScaleY="0" />
</TransformGroup>
</materialDesign:Card.RenderTransform>
</materialDesign:Card>
</controlzEx:PopupEx>
<AdornerDecorator>
<ContentPresenter
x:Name="ContentPresenter" Opacity="1"
Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" />
</AdornerDecorator>
<Grid x:Name="PART_ContentCoverGrid" Background="{x:Null}" Opacity="0" IsHitTestVisible="False" Focusable="False" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsOpen" Value="True">
<Setter TargetName="ContentPresenter" Property="IsEnabled" Value="False" />
<Setter TargetName="PART_ContentCoverGrid" Property="Background" Value="Black" />
<Setter TargetName="PART_ContentCoverGrid" Property="IsHitTestVisible" Value="True" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
@Halvanhelev
Copy link

Halvanhelev commented Feb 3, 2017 •
edited

Thanks I'll try these.

I also search a way to make a re-sizable dialog

`public class ResizeThumb : Thumb
{
public ResizeThumb()
{
DragDelta += new DragDeltaEventHandler(this.ResizeThumb_DragDelta);
}

    private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        Control designerItem = this.DataContext as Control;

        if (designerItem != null)
        {
            double deltaVertical, deltaHorizontal;

            switch (VerticalAlignment)
            {
                case VerticalAlignment.Bottom:
                    deltaVertical = Math.Min(-e.VerticalChange, designerItem.ActualHeight - designerItem.MinHeight);
                    designerItem.Height -= deltaVertical;
                    break;
                case VerticalAlignment.Top:
                    deltaVertical = Math.Min(e.VerticalChange, designerItem.ActualHeight - designerItem.MinHeight);
                    Canvas.SetTop(designerItem, Canvas.GetTop(designerItem) + deltaVertical);
                    designerItem.Height -= deltaVertical;
                    break;
                default:
                    break;
            }

            switch (HorizontalAlignment)
            {
                case HorizontalAlignment.Left:
                    deltaHorizontal = Math.Min(e.HorizontalChange, designerItem.ActualWidth - designerItem.MinWidth);
                    Canvas.SetLeft(designerItem, Canvas.GetLeft(designerItem) + deltaHorizontal);
                    designerItem.Width -= deltaHorizontal;
                    break;
                case HorizontalAlignment.Right:
                    deltaHorizontal = Math.Min(-e.HorizontalChange, designerItem.ActualWidth - designerItem.MinWidth);
                    designerItem.Width -= deltaHorizontal;
                    break;
                default:
                    break;
            }
        }

        e.Handled = true;
    }
}`

then on Xaml

<Style TargetType="{x:Type UserControl}" x:Key="usercontrolStyle" > <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ContentControl}"> <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"> <Control x:Name="resizer"> <Control.Style> <Style TargetType="{x:Type Control}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Control}"> <Grid Margin="-3"> <ProdResource:ResizeThumb Width="7" Height="7" Margin="-2" Cursor="SizeNWSE" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Control.Style> </Control> <ContentPresenter Content="{TemplateBinding Content}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

and i put the style to the usercontrol.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment