Ultimate Ui - Create Beautiful Uis With Xaml, Datagrid, Metro & More!

Marani · February 6, 2020

Contact them (Ubot staff).

I've bought one of Nick's video tutorials and it was invaluable to me.
I'm going to upgrade to Dev if I can get a decent discount and buy some of Nick's plugins.

cob007 · February 7, 2020

i have created listview like this but if i use get listview property selected index it returns 2 instead of the value which is at selected index

plugin command("UltimateUI.dll", "UI Load XAML", "    <ListView Margin=\"10,10,0,13\" Name=\"ListView1\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Top\" Width=\"194\" Height=\"200\">
        <ListViewItem Content=\"Coffie\"></ListViewItem>
        <ListViewItem Content=\"Tea\"></ListViewItem>
        <ListViewItem Content=\"Orange Juice\"></ListViewItem>
        <ListViewItem Content=\"Milk\"></ListViewItem>
        <ListViewItem Content=\"Iced Tea\"></ListViewItem>
        <ListViewItem Content=\"Mango Shake\"></ListViewItem>
    </ListView> ", "False", "False", "False", "BaseLight", "Blue")

Marani · February 10, 2020

I made this from your sample code and it worked correctly for me here:

plugin command("UltimateUI.dll", "UI Load XAML", "<Grid>
        <ListView x:Name=\"myList\" HorizontalAlignment=\"Left\" Height=\"185\" Margin=\"70,49,0,0\" VerticalAlignment=\"Top\" Width=\"256\">           
            <ListView.View>
            
        <GridView>
                    <GridViewColumn/>
                </GridView>
            </ListView.View>

            <ListViewItem Content=\"Coffie\"></ListViewItem>
            <ListViewItem Content=\"Tea\"></ListViewItem>
            <ListViewItem Content=\"Orange Juice\"></ListViewItem>
            <ListViewItem Content=\"Milk\"></ListViewItem>
            <ListViewItem Content=\"Iced Tea\"></ListViewItem>
            <ListViewItem Content=\"Mango Shake\"></ListViewItem>
            
        </ListView>

    </Grid>", "False", "False", "False", "BaseLight", "Blue")
plugin command("UltimateUI.dll", "UI Add ListView Event", "SelectionChanged", "myList", "listTest")
define listTest {
    alert($plugin function("UltimateUI.dll", "$UI Get ListView Property", "SelectedIndex", "myList"))
}

i have created listview like this but if i use get listview property selected index it returns 2 instead of the value which is at selected index

plugin command("UltimateUI.dll", "UI Load XAML", "    <ListView Margin=\"10,10,0,13\" Name=\"ListView1\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Top\" Width=\"194\" Height=\"200\">
        <ListViewItem Content=\"Coffie\"></ListViewItem>
        <ListViewItem Content=\"Tea\"></ListViewItem>
        <ListViewItem Content=\"Orange Juice\"></ListViewItem>
        <ListViewItem Content=\"Milk\"></ListViewItem>
        <ListViewItem Content=\"Iced Tea\"></ListViewItem>
        <ListViewItem Content=\"Mango Shake\"></ListViewItem>
    </ListView> ", "False", "False", "False", "BaseLight", "Blue")

cob007 · February 11, 2020

I made this from your sample code and it worked correctly for me here:

plugin command("UltimateUI.dll", "UI Load XAML", "<Grid>
        <ListView x:Name=\"myList\" HorizontalAlignment=\"Left\" Height=\"185\" Margin=\"70,49,0,0\" VerticalAlignment=\"Top\" Width=\"256\">           
            <ListView.View>
            
        <GridView>
                    <GridViewColumn/>
                </GridView>
            </ListView.View>

            <ListViewItem Content=\"Coffie\"></ListViewItem>
            <ListViewItem Content=\"Tea\"></ListViewItem>
            <ListViewItem Content=\"Orange Juice\"></ListViewItem>
            <ListViewItem Content=\"Milk\"></ListViewItem>
            <ListViewItem Content=\"Iced Tea\"></ListViewItem>
            <ListViewItem Content=\"Mango Shake\"></ListViewItem>
            
        </ListView>

    </Grid>", "False", "False", "False", "BaseLight", "Blue")
plugin command("UltimateUI.dll", "UI Add ListView Event", "SelectionChanged", "myList", "listTest")
define listTest {
    alert($plugin function("UltimateUI.dll", "$UI Get ListView Property", "SelectedIndex", "myList"))
}

thanks will check again

cob007 · February 11, 2020

Hi nick,

is there anyway we can change individual cell value of datagrid after a row has been added, this can be useful, say we want to update only a single cell value and not the other cells , because this way , let us say we have a button called analyze and user clicks the analyze button, then a single cell will update of that row of that datagrid showing a new value rather than updating the entire row of datagrid and this also means we don't need a fresh datagrid just to show updated values

Marani · February 29, 2020

Nick, are you here?

I need to create a Log and I have problem TextBlock control doesn't maintain the last Log text (replaces new text in the control).

HelloInsomnia · March 3, 2020

Nick, are you here?

I need to create a Log and I have problem TextBlock control doesn't maintain the last Log text (replaces new text in the control).

You probably wouldn't use a textblock for this, but yes it will replace it so you will either have to have an internal variable or something to keep track of it or you can also get the text like so:

plugin command("UltimateUI.dll", "UI Load XAML", "<TextBlock x:Name=\"log\"/>", "False", "False", "False", "BaseLight", "Blue")
plugin command("UltimateUI.dll", "UI Set TextBlock Property", "Text", "log", "one")
set(#log,$plugin function("UltimateUI.dll", "$UI Get TextBlock Property", "Text", "log"),"Global")
plugin command("UltimateUI.dll", "UI Set TextBlock Property", "Text", "log", "{#log}
two")

I'll post another example soon of something closer to what you probably want instead.

HelloInsomnia · March 3, 2020

This is probably closer to what you want:

plugin command("UltimateUI.dll", "UI Load XAML", "<TextBox x:Name=\"Log\" 
                 Height=\"200\" 
                 IsReadOnly=\"True\"
                 VerticalScrollBarVisibility=\"Auto\"/>", "False", "False", "False", "BaseLight", "Blue")
clear list(%log)
loop(20) {
    add item to list(%log,"{$date} - {$random text($rand(30,50))}","Don\'t Delete","Global")
    plugin command("UltimateUI.dll", "UI Set TextBox Property", "Text", "Log", %log)
    wait(1)
}

Eddie · March 6, 2020

This is probably closer to what you want:

plugin command("UltimateUI.dll", "UI Load XAML", "<TextBox x:Name=\"Log\" 
                 Height=\"200\" 
                 IsReadOnly=\"True\"
                 VerticalScrollBarVisibility=\"Auto\"/>", "False", "False", "False", "BaseLight", "Blue")
clear list(%log)
loop(20) {
    add item to list(%log,"{$date} - {$random text($rand(30,50))}","Don\'t Delete","Global")
    plugin command("UltimateUI.dll", "UI Set TextBox Property", "Text", "Log", %log)
    wait(1)
}

thanks Nick, how to keep the textbox auto scroll down and always show the bottom line of the log?

HelloInsomnia · March 6, 2020

Probably the easiest way is to just reverse the list so you don't have to have the box keep scrolling.

gandensang · March 10, 2020

Hi nick,

is there anyway we can change individual cell value of datagrid after a row has been added, this can be useful, say we want to update only a single cell value and not the other cells , because this way , let us say we have a button called analyze and user clicks the analyze button, then a single cell will update of that row of that datagrid showing a new value rather than updating the entire row of datagrid and this also means we don't need a fresh datagrid just to show updated values

and waiting datagrid sort/search... hope available in next update

FallingDown · March 13, 2020

and waiting datagrid sort/search... hope available in next update

Also anxiously awaiting sort and search as well as shift click to multiple select and select all feature.

Sent from my LG-H932 using Tapatalk

nurzaga · April 17, 2020

Hi Nick,
What command to save from datagrid to table? list or variable?
i need saving datagrid to file

thank you

+++++++++++++++++++++++++++++++++++++++++++

EDITED :

Found it : get datagrid cell value

I hope next update will cover command : datagrid to table

cob007 · April 17, 2020

Hi Nick,
What command to save from datagrid to table? list or variable?
i need saving datagrid to file

thank you

loop through the datagrid and get data from each row, thats what i did

loop($plugin function("UltimateUI.dll", "$UI Get DataGrid Row Count", "dataGrid2")) {

set table cell(&saveSearchResults,#track_TableRowForSaveVideoResults,0,$plugin function("HeopasCustom.dll", "$Heopas Xpath Parser", $plugin function("UltimateUI.dll", "$UI Get DataGrid Row", "dataGrid2", $subtract(#track_TableRowForSaveResults,1)), "//textcolumnmodel/text", "InnerText", 0))

set table cell(&saveSearchVideosResults,#track_TableRowForSaveVideoResults,1,$plugin function("HeopasCustom.dll", "$Heopas Xpath Parser", $plugin function("UltimateUI.dll", "$UI Get DataGrid Row", "dataGrid2", $subtract(#track_TableRowForSaveResults,1)), "//textcolumnmodel/text", "InnerText", 1))

drewness · May 6, 2020

Hi Nick,

Could you post some sample code on how to change UI buttons appearance on hover? I can set the buttons background color and border with something like:

<Border Padding="8">
     <Border.Resources>
        <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="#181818" />
                <Setter Property="BorderBrush" Value="#181818" />
                <Setter Property="Foreground" Value="#B3B5B1" />
          </Style>
     </Border.Resources>
</Border>

However, when I add some code like:

<Style.Triggers>
   <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="#FFF" />
        <Setter Property="BorderBrush"  Value="#FFF"/>
   </Trigger>
</Style.Triggers>

In between the <Style> tags it doesn't take effect - the default styling still applies to the hover state.

Could you point me in the right direction on how to customize WPF elements on different states (such as hover)?

Would be much appreciated. Thanks in advance!

nurzaga · May 6, 2020

loop through the datagrid and get data from each row, thats what i did

loop($plugin function("UltimateUI.dll", "$UI Get DataGrid Row Count", "dataGrid2")) {
    set table cell(&saveSearchResults,#track_TableRowForSaveVideoResults,0,$plugin function("HeopasCustom.dll", "$Heopas Xpath Parser", $plugin function("UltimateUI.dll", "$UI Get DataGrid Row", "dataGrid2", $subtract(#track_TableRowForSaveResults,1)), "//textcolumnmodel/text", "InnerText", 0))
    set table cell(&saveSearchVideosResults,#track_TableRowForSaveVideoResults,1,$plugin function("HeopasCustom.dll", "$Heopas Xpath Parser", $plugin function("UltimateUI.dll", "$UI Get DataGrid Row", "dataGrid2", $subtract(#track_TableRowForSaveResults,1)), "//textcolumnmodel/text", "InnerText", 1))

GREAT... THANKS

HelloInsomnia · May 9, 2020

Hi Nick,

Could you post some sample code on how to change UI buttons appearance on hover? I can set the buttons background color and border with something like:
<Border Padding="8">
     <Border.Resources>
        <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="#181818" />
                <Setter Property="BorderBrush" Value="#181818" />
                <Setter Property="Foreground" Value="#B3B5B1" />
          </Style>
     </Border.Resources>
</Border>
However, when I add some code like:
<Style.Triggers>
   <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="#FFF" />
        <Setter Property="BorderBrush"  Value="#FFF"/>
   </Trigger>
</Style.Triggers>
In between the <Style> tags it doesn't take effect - the default styling still applies to the hover state.

Could you point me in the right direction on how to customize WPF elements on different states (such as hover)?

Would be much appreciated. Thanks in advance!

Yes probably something like this:

<Grid>
        <Grid.Resources>
            <Style x:Key="FocusVisual">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <SolidColorBrush x:Key="Button.Static.Background" Color="#FF181818"/>
            <SolidColorBrush x:Key="Button.Static.Border" Color="#FF181818"/>
            <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFFFFFFF"/>
            <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FFFFFFFF"/>
            <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
            <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
            <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
            <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
            <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
            <Style x:Key="CustomButton" TargetType="{x:Type Button}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
                <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
                <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
                <Setter Property="Foreground" Value="#FFB3B5B1"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsDefaulted" Value="true">
                                    <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="true">
                                    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Button Content="Your Content" Style="{DynamicResource CustomButton}"/>
    </Grid>

And I know probably what that looks like

But here is the EASY way to do it:

1. Go into Visual Studio (probably Blend would work too)

2. Make a normal button

3. In the visual designer right click on the button then go to Edit Template-> Edit a Copy

4. Place it in the relevant resources section (e.g. in the top level grid if you want to use it everywhere)

5. Use the name wherever you want it, e.g. Template="{DynamicResource CustomButton}"

Note: I added FF in front of the 6 letter/number color code just because in the template that is the format that use.

Note: You may want to change the IsPressed, etc as well to make it look better.

HelloInsomnia · May 10, 2020

Edit: I had Metro on in the previous version (which would work too) - so this is for a normal button

cob007 · May 11, 2020

Edit: I had Metro on in the previous version (which would work too) - so this is for a normal button

Is it possible to drag and drop stuff or only possible to do that in code behind in #C.

https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/walkthrough-enabling-drag-and-drop-on-a-user-control

drewness · May 25, 2020

Edit: I had Metro on in the previous version (which would work too) - so this is for a normal button

Thank you so much for the help - I was able to get it working with the info you provided - eternally grateful for all your awesome training, plugins, and support.

Meant to thank you earlier but by the time I got to try and implement your tips the forum was down (luckily for me I had your response in an email from the forum, so could experiment) - but I got it working and wanted to thank you now that the forum is functioning properly again. I really appreciate it!

sunny9495 · May 29, 2020

Hi Nick, Sent you a PM regarding set Rich Textbox Property to a variable

HelloInsomnia · June 4, 2020

Is it possible to drag and drop stuff or only possible to do that in code behind in #C.

https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/walkthrough-enabling-drag-and-drop-on-a-user-control

Drag and drop is explained here: https://github.com/nicklikescoffee/UltimateUiPlugin/wiki/Drag-and-Drop

HelloInsomnia · June 17, 2020

Update V 1.11

Added

Change DataGrid Text Cell Value
Change DataGrid Image Cell Value
Change DataGrid Button Cell Value
Add DataGrid Header Click Event

The ability to run a command when the datagrid header is clicked means that you can implement a sorting algorithm for the datagrid. In the UltimateUI Demo folder that comes with the plugin you will see DataGrid With Sort Example to see a basic example of how to use Add DataGrid Header Click Event and sort a table.

cob007 · June 17, 2020

great update, if we do a table to datagrid, we cant add button element or images, will that be possible soon

HelloInsomnia · June 17, 2020

great update, if we do a table to datagrid, we cant add button element or images, will that be possible soon

I can possibly see an image that isn't clickable but how would the button work?

Ultimate Ui - Create Beautiful Uis With Xaml, Datagrid, Metro & More!

Recommended Posts

Marani 80

Link to post

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Posted Images

cob007 19

Link to post

Share on other sites

Marani 80

Link to post

Share on other sites

cob007 19

Link to post

Share on other sites

cob007 19

Link to post

Share on other sites

Marani 80

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

Eddie 14

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

gandensang 11

Link to post

Share on other sites

FallingDown 2

Link to post

Share on other sites

nurzaga 1

Link to post

Share on other sites

cob007 19

Link to post

Share on other sites

drewness 26

Link to post

Share on other sites

nurzaga 1

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

cob007 19

Link to post

Share on other sites

drewness 26

Link to post

Share on other sites

sunny9495 42

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

cob007 19

Link to post

Share on other sites