Document Interface UserControl

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

Hi,

I have been playing about with the MarkupLabel and find it can be very useful to create my own controls or interfaces. However it is lacking in some key areas and can be quite annoying to find that xaml code that works correctly doesn't work in this MarkupLabel control.

I have created a Document style UserControl interface that displays as a page with a dropshadow (similar to MS Word), the following two methods work perfectly in XamlPad:

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
      xmlns:sys='clr-namespace:System;assembly=mscorlib' 
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' >

    <Grid Height='200' Margin='-2,-2,-6,-6' Width='500'>
        <Rectangle Stroke='Black' Margin='6' RadiusX='0' RadiusY='0' />
        <Rectangle Stroke='Black' Margin='5' RadiusX='1' RadiusY='1' Opacity='0.25'/>
        <Rectangle Stroke='Black' Margin='4' RadiusX='2' RadiusY='2' Opacity='0.2'/>
        <Rectangle Stroke='Black' Margin='3' RadiusX='3' RadiusY='3' Opacity='0.15'/>
        <Rectangle Stroke='Black' Margin='2' RadiusX='4' RadiusY='4' Opacity='0.1'/>
        <Rectangle Stroke='Black' Margin='1' RadiusX='5' RadiusY='5' Opacity='0.05'/>
    </Grid>

</Page>

or 

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
      xmlns:sys='clr-namespace:System;assembly=mscorlib' 
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' >

    <Border BorderBrush='#000000' BorderThickness='1' Margin='10'>
        <Border.Effect>
            <DropShadowEffect Color='Black' Direction='270' BlurRadius='20' ShadowDepth='2' />
        </Border.Effect>
        <Grid Background='White' />
    </Border>

</Page>

However because the CJ Markup doesn't support Border.Effect, DropShadowEffect and Opacity I have had to change this to:

<Grid Height='200' Width='1000'>
    <Rectangle Fill='#FFFFFF' Stroke='Black' Margin='5' RadiusX='0' RadiusY='0'/>
    <Rectangle Stroke='#AFAFAF' Margin='4' RadiusX='1' RadiusY='1'/>
    <Rectangle Stroke='#BFBFBF' Margin='3' RadiusX='2' RadiusY='2'/>
    <Rectangle Stroke='#CFCFCF' Margin='2' RadiusX='3' RadiusY='3'/>
    <Rectangle Stroke='#DFDFDF' Margin='1' RadiusX='4' RadiusY='4'/>
    <Rectangle Stroke='#EFEFEF' Margin='0' RadiusX='5' RadiusY='5'/>
</Grid> 

This gives the same kind of effect, but the Border.Effect, DropShadowEffect and Opacity properties would be better as this would add transparency to the dropshadow.

Will CJ be adding support for this in the future as well as many others?

Below is the VB6 UserControl code for creating the Document style interface, just add a MarkupLabel control to the UserControl and paste the following code:

Option Explicit

Private Sub CreateMarkupDocument()
    Dim ctx As MarkupContext, doc As MarkupGrid, docShadow As MarkupRectangle
    Dim i As Long, m As Long, r As Long, ShadowColor As OLE_COLOR

    Set ctx = UserControl.MarkupLabel.MarkupContext
    With ctx
        Set doc = .CreateObject("Grid")
        With doc

            For i = 0 To 5
                Select Case i
                    Case 0: m = 4: r = 10: ShadowColor = &H9F9F9F
                    Case 1: m = 3: r = 11: ShadowColor = &HAFAFAF
                    Case 2: m = 2: r = 12: ShadowColor = &HBFBFBF
                    Case 3: m = 1: r = 13: ShadowColor = &HC6C6C6
                    Case 4: m = 0: r = 14: ShadowColor = &HCFCFCF
                    Case 5: m = 5: r = 0: ShadowColor = &H0&
                End Select

                Set docShadow = ctx.CreateObject("Rectangle")
                With docShadow
                    If i = 0 Then Set .Fill = ctx.CreateSolidBrush(&HFFFFFF)
                    Set .Margin = ctx.CreateThickness(m, m, m, m)
                    Set .Stroke = ctx.CreateSolidBrush(ShadowColor)
                    .RadiusX = r
                    .RadiusY = r
                End With 

                doc.Children.Add docShadow
            Next

        End With 

    End With 

    Set UserControl.MarkupLabel.MarkupUIElement = doc
End Sub

Private Sub UserControl_Initialize()
    Call CreateMarkupDocument
End Sub

Private Sub UserControl_Resize()
    On Error Resume Next
    UserControl.MarkupLabel.Move 0, 0, UserControl.ScaleWidth, UserControl.ScaleHeight
End Sub

Don't forget to set "UserControl.ControlContainer = True", so you can drop controls on it. Heads up though, Labels don't display when dropped on it, to get round this place a picture box in first and set it to be as high and wide as the document display remove the border and set as white, then you can see the Labels correctly.