x:Light Alpha (Xaml Highlighter) Could you please test (Testing Finished)

Update

Hi Guys,

I first of all would like to thank Chris and VBNeo for finding all the bugs present in the highlighter formula. x:Light has now gone BETA and I will begin to work on it from Friday the 20th of Feb. Unfortunately the AUP forbids me to upload a project without source code and since the source will largely be reworked I do not wish to upload it in its current form.

If you PM me I will be happy to provide the link to ALPHA V0.9 which is the release both Chris and VBNeo are using while the BETA is being worked on. Understand that by PM'ing me for the link you release any burden of responsibility from Jupitermedia or its partners as to the stability or validity of this software.

I will try to get the actual highlighting engine into BETA as quick as I can so that both the .DLL and all source material will be available to pull apart.

Thanks

DeanMc

PS: For those who have not seen this thread before x:Light is a Xaml highlighter based on the 3.5 framework and WPF. In order for you to be able to run x:Light you need to have the 3.5 framework installed, otherwise you will receive an error message. VBNeo's last code example is from version ALPHA V0.9.

ps: please add a plaintext snippet as well as a highlighted snippet of the Xaml that is giving you issue so I can test it, thanks guys!

I know I already mentioned these to you on MSN but just so that other people dont repeat them, here's the issues I found:


Tags with a "." in do not have anything after the "." coloured correctly.
Example Line:
<Setter.Value>

When copying and pasting from the Visual Studio XAML editor, the tab indentations are not retained.

Attribute values that start with the # symbol (such as colour values) do not get coloured correctly.
Example Line:
<GradientStop Color="#FF6A6A6A" Offset="0" />

cool, can you post [code] examples so I can get a visual! Thanks chris!

Ok chris thats both those issues fixed and also code tags are added, re uploading now!

Code:

---

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <RichTextBox Height="79" Name="RichTextBox1" Width="278" IsDocumentEnabled="False" VerticalAlignment="Top" />
        <Button HorizontalAlignment="Right" Margin="0,85,0,0" Name="Button1" Width="75" Height="23" VerticalAlignment="Top">Button</Button>
        <TextBox Margin="0,126,0,61" Name="TextBox1" />
        <Button Height="23" HorizontalAlignment="Right" Margin="0,0,0,12" Name="Button2" VerticalAlignment="Bottom" Width="75">Button</Button>
        <GradientStop Color="#FF508DB7" Offset="1"/> <Setter.Value>
    </Grid>
</Window>

---

Binding now works:

Code:

---

    </Grid>
</Window>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> Key="{xtatic SystemColors.HighlightBrushKey}"
x:Key="{x tatic SystemColors.HighlightBrushKey}"

---

Binding test :)

Code:

---

<VisualBrush Visual="{Binding ElementName=ImageContainer}" />

---

EDIT: dont work properly :(

Now it does:

Code:

---

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <RichTextBox Height="79" Name="RichTextBox1" Width="278" IsDocumentEnabled="False" VerticalAlignment="Top" />
        <Button HorizontalAlignment="Right" Margin="0,85,0,0" Name="Button1" Width="75" Height="23" VerticalAlignment="Top">Button</Button>
        <TextBox Margin="0,126,0,61" Name="TextBox1" />
        <Button Height="23" HorizontalAlignment="Right" Margin="0,0,0,12" Name="Button2" VerticalAlignment="Bottom" Width="75">Button</Button>
    </Grid>
</Window>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> Key="{xtatic SystemColors.HighlightBrushKey}"
x:Key="{x tatic SystemColors.HighlightBrushKey}"
<VisualBrush Visual="{Binding ElementName=ImageContainer}" />

---

I might change the color of the binding though, next version i swear!

The schema bits are still screwed up though :P

Which parts? I need examples this is what I have...

Code:

---

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <RichTextBox Height="79" Name="RichTextBox1" Width="278" IsDocumentEnabled="False" VerticalAlignment="Top" />
        <Button HorizontalAlignment="Right" Margin="0,85,0,0" Name="Button1" Width="75" Height="23" VerticalAlignment="Top">Button</Button>
        <TextBox Margin="0,126,0,61" Name="TextBox1" />
        <Button Height="23" HorizontalAlignment="Right" Margin="0,0,0,12" Name="Button2" VerticalAlignment="Bottom" Width="75">Button</Button>
    </Grid>
</Window>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> Key="{xtatic SystemColors.HighlightBrushKey}"
x:Key="{xstatic SystemColors.HighlightBrushKey}"
<VisualBrush Visual="{Binding ElementName=ImageContainer}" />

---

Ok this is the final update tonight, I will leave for 48 hours and if I get no more bug fixes I will take x:Light into beta and rework the engine and design!

Code:

---

<ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:WPFControls">

        <Style TargetType="{x:Type Controls:ScrollViewerThumbnail}">
                <Setter Property="Template">
                        <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Controls:ScrollViewerThumbnail}">
                                        <Viewbox DataContext="{TemplateBinding ScrollViewer}" Stretch="Uniform">
                                                <Grid>
                                                        <Rectangle Width="{Binding Content.ActualWidth}" Height="{Binding Content.ActualHeight}">
                                                                <Rectangle.Fill>
                                                                        <VisualBrush Visual="{Binding Content}" />
                                                                </Rectangle.Fill>
                                                        </Rectangle>
                                                        <Thumb Name="ThumbHighlight" Background="{TemplateBinding HighlightFill}" Width="{Binding ViewportWidth}"
                                                                Height="{Binding ViewportHeight}" HorizontalAlignment="Left" VerticalAlignment="Top">
                                                                <Thumb.RenderTransform>
                                                                        <TranslateTransform X="{Binding HorizontalOffset}" Y="{Binding VerticalOffset}" />
                                                                </Thumb.RenderTransform>
                                                                <Thumb.Template>
                                                                        <ControlTemplate TargetType="Thumb">
                                                                                <Border Background="{TemplateBinding Background}" />
                                                                        </ControlTemplate>
                                                                </Thumb.Template>
                                                        </Thumb>
                                                </Grid>
                                        </Viewbox>
                                </ControlTemplate>

---

Cool :) Testing!

Code:

---

<vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Duration="00:00:00" Storyboard.TargetName="gsRectPagerButton_0" Storyboard.TargetProperty="Color" To="{StaticResource Gradient_DarkBlue_0}"></ColorAnimation>
                                    <ColorAnimation Duration="00:00:00" Storyboard.TargetName="gsRectPagerButton_1" Storyboard.TargetProperty="Color" To="{StaticResource Gradient_DarkBlue_1}"></ColorAnimation>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard>
                                    <ColorAnimation Duration="00:00:00" Storyboard.TargetName="gsRectPagerButton_0" Storyboard.TargetProperty="Color" To="{StaticResource Gradient_DarkGray_0}"></ColorAnimation>
                                    <ColorAnimation Duration="00:00:00" Storyboard.TargetName="gsRectPagerButton_1" Storyboard.TargetProperty="Color" To="{StaticResource Gradient_DarkGray_1}"></ColorAnimation>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

---

^ Well that doesnt look right ;) there's a problem when using custom references and with coloring of properties with dots, eg. "Grid.Row".

It might be cool to add support for auto indentation as well... I bet you could get XmlDocument or something like that to do it for you :).

Thanks for taking the time to test x:Light VBNeo. Those two issues should be simple to resolve as the formula does not account for prop.subprop or prefix : object althought I thought I had impelemented the prefix : object space it seems I only implemented prefix : object Char. Not to worry I will fix when I get home from work. Could you please test any more unusual example of Xaml you have as I would like to make the Regex formulae as airtight as possible!

Also, where are you refeering two regrading the indentation? The source box or the output box?

PS I imagine x:Light would also highlight XML as it is based on document construction rules not keywords!

Et Viola! New version will be up shortly EDIT: up now, see post #1

Code:

---

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <RichTextBox Height="79" Name="RichTextBox1" Width="278" IsDocumentEnabled="False" VerticalAlignment="Top" />
        <Button HorizontalAlignment="Right" Margin="0,85,0,0" Name="Button1" Width="75" Height="23" VerticalAlignment="Top">Button</Button>
        <TextBox Margin="0,126,0,61" Name="TextBox1" />
        <Button Height="23" HorizontalAlignment="Right" Margin="0,0,0,12" Name="Button2" VerticalAlignment="Bottom" Width="75">Button</Button>
    </Grid>
</Window>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<VisualBrush Visual="{Binding ElementName=ImageContainer}" />
</Thumb.Template>
<vsm:VisualState x:Name="Normal">
<ColorAnimation Duration="00:00:00" Storyboard.TargetName="gsRectPagerButton_0" Storyboard.TargetProperty="Color" To="{StaticResource Gradient_DarkGray_0}"></ColorAnimation>

---

TESTAGE

Code:

---

<Window x:Class="MainWindowfrm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:MyNS="clr-namespace:ServiceDeskLogger"
    Title="MainWindowfrm" Height="559" Width="874" WindowStartupLocation="CenterScreen" WindowState="Normal" WindowStyle="SingleBorderWindow" SnapsToDevicePixels="True" x:Name="Window1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Window.Resources>
        <Style x:Key="MenuListBoxStyle" TargetType="{x:Type ListBox}">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <DataTemplate x:Key="ItemsDataTemplate">

---

all good.. except the custom namespace bit. Get to work boy!

Oh yeah, check me out!

Code:

---

<Window x:Class="MainWindowfrm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:MyNS="clr-namespace:ServiceDeskLogger"
    Title="MainWindowfrm" Height="559" Width="874" WindowStartupLocation="CenterScreen" WindowState="Normal" WindowStyle="SingleBorderWindow" SnapsToDevicePixels="True" x:Name="Window1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Window.Resources>
        <Style x:Key="MenuListBoxStyle" TargetType="{x:Type ListBox}">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <DataTemplate x:Key="ItemsDataTemplate">

---

Re uped, should be gravy now!

not bad, not bad at all ;)

testing yet again

Code:

---

<DataTemplate x:Key="ItemsDataTemplate">
            <Grid x:Name="ImageGrid" Margin="10,2,6,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="62" />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Border Background="White" MouseLeftButtonDown="ListBoxItem_MouseLeftButtonDown" MouseLeave="ListBoxItem_MouseLeave"
                        MouseEnter="ListBoxItem_MouseEnter" Height="60" Width="60" Grid.Row="0"
                        x:Name="ImageContainer" Margin="2,2,2,1" CornerRadius="5,5,5,5"
                        BorderBrush="black" BorderThickness="3">
                    <Image x:Name="ActualImage" Opacity="0.6" Grid.Row="0"  Margin="3" Stretch="Fill"
                          Source="{Binding Path=Img}" />
                </Border>
                <Border Grid.RowSpan="2" Grid.Row="1" Height="60" Width="60" Margin="0,1,0,0">
                    <Border.Background>
                        <VisualBrush Visual="{Binding ElementName=ImageContainer}" />
                    </Border.Background>
                    <Border.LayoutTransform>
                        <ScaleTransform ScaleX="1" ScaleY="-1"/>
                    </Border.LayoutTransform>
                    <Border.OpacityMask>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#00000000" Offset="0.44"/>
                            <GradientStop Color="#59FFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.OpacityMask>
                </Border>

---

Boy Jove, I think they boy has cracked it!

Code:

---

<ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="rcBackgroundGS0" Storyboard.TargetProperty="Color" To="{StaticResource Gradient_DarkBlue_0}" Duration="0:0:0.05"></ColorAnimation>
                                            <ColorAnimation Storyboard.TargetName="rcBackgroundGS1" Storyboard.TargetProperty="Color" To="{StaticResource Gradient_DarkBlue_1}" Duration="0:0:0.05"></ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.05"
                                                        Storyboard.TargetName="rcVerticalLine"
                                                        Storyboard.TargetProperty="Opacity" To="0" />
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Unchecked">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.05"
                                                        Storyboard.TargetName="rcVerticalLine"
                                                        Storyboard.TargetProperty="Opacity" To="1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Grid x:Name="Button" Width="16" Height="16">
                                <Rectangle RadiusX="3" RadiusY="3" Stroke="Black" StrokeThickness="1">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
                                            <GradientStop Color="{StaticResource Gradient_DarkGray_0}" Offset="0" x:Name="rcBackgroundGS0"></GradientStop>
                                            <GradientStop Color="{StaticResource Gradient_DarkGray_1}" Offset="1" x:Name="rcBackgroundGS1"></GradientStop>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Rectangle RadiusX="3" RadiusY="3" Fill="White" Opacity="0.26">
                                    <Rectangle.Clip>
                                        <RectangleGeometry Rect="0, 0, 16, 8"></RectangleGeometry>
                                    </Rectangle.Clip>
                                </Rectangle>

                                <Rectangle VerticalAlignment="Center" HorizontalAlignment="Center" Name="rcHorizontalLine" Fill="#ffffff" RadiusY="1" RadiusX="1" Width="8" Height="2">
                                </Rectangle>
                                <Rectangle VerticalAlignment="Center" HorizontalAlignment="Center" Name="rcVerticalLine" Fill="#ffffff" RadiusY="1" RadiusX="1" Width="2" Height="8">
                                </Rectangle>
                            </Grid>
                        </Grid>
                    </ControlTemplate>

---

Awesome... Awesome to the max!

Super, it seems APLHA .09 is stable. I will begin on the BETA version late next week as I have a lot on until friday!