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

[nurzaga 1]

USE imgur.com to upload images

 

i don't understand,

how can this answer can solve my issue? 

[HelloInsomnia 1103]

i don't understand,

how can this answer can solve my issue? 

 

You can upload your images somewhere, such as Imgur and then set the image source to be the url.

[nurzaga 1]

You can upload your images somewhere, such as Imgur and then set the image source to be the url.

 

oh i see,

but i mean the image act as a logo on UI. and shouldn't it saved offline on the pc? 

can the image saved offline act as logo in the UI? 

 

 

thank you

[Code Docta (Nick C.) 638]

can i placed image on the UI?

i managed to placed image on the UI but have to used exact path locations, example : C:/users/user_profile_name/documents/image.jpeg 

 

when it move to another pc won't work because the path location (user_profile_name) is difference off course. 

 

any way to solve this issue? 

 

thank you

 

instead of an absolute path use

$special folder

 

in the drop down use "Application"

 

This will use a path to where ever your .exe/.ubot file is located.

alert("{$special folder("Application")}\\Data")

Of course the Data folder must exist.

 

But that will allow you to use your logo image.

 

Regards,

Nick

[nurzaga 1]

instead of an absolute path use

$special folder

 

in the drop down use "Application"

 

This will use a path to where ever your .exe/.ubot file is located.

alert("{$special folder("Application")}\\Data")

Of course the Data folder must exist.

 

But that will allow you to use your logo image.

 

Regards,

Nick

 

 

 

 

thank you for advice,

but this happen when i tried that.

the special folder turn into line of code when i click OK.

any idea to fix? 

 

[HelloInsomnia 1103]

oh i see,

but i mean the image act as a logo on UI. and shouldn't it saved offline on the pc? 

can the image saved offline act as logo in the UI? 

 

 

thank you

 

Currently, there isn't a good way to set it in code. I will add that in though.

 

For now I'd just use a URL until I can add that property in. I'll add it in so that you can set it in code and put any path you want in there. That way you can use the special folder function in code to get the path on the users computer.

[Code Docta (Nick C.) 638]

 

 

 

thank you for advice,

but this happen when i tried that.

the special folder turn into line of code when i click OK.

any idea to fix? 

 

ya, try to set it in a variable first, then put drag the #variable where you need it.

[HelloInsomnia 1103]

As Nick said, you can also do it this way as well:

set(#image,"YOUR IMAGE PATH","Global")
plugin command("UltimateUI.dll", "UI Load XAML", "<Image Source=\"{#image}\"/>", "False", "False", "False", "BaseLight", "Blue")

[nurzaga 1]

ya, try to set it in a variable first, then put drag the #variable where you need it.

 

thank you Nick, It look like possible. 

[cob007 19]

 

Not in the current version but I do plan on adding this in a future update.

 

You can get a similar effect by doing this:

plugin command("UltimateUI.dll", "UI Load XAML", "<Border BorderThickness=\"0 0 0 1\" BorderBrush=\"Blue\"
                    Width=\"78\">
                <TextBlock x:Name=\"hyperlink\"
                       Foreground=\"Blue\"
                       Cursor=\"Hand\"
                       HorizontalAlignment=\"Center\"
                       Text=\"Open Website\"/>
            </Border>", "False", "False", "False", "BaseLight", "Blue")
plugin command("UltimateUI.dll", "UI Add Event", "hyperlink", "MouseLeftButtonDown", "NavigateTo")
define NavigateTo {
    navigate("https://google.com","Wait")
}

Actually I want to do the way you did it in the regex course regex genius, use a hyperlink but then run a define command and not necessarily a hypelink for which you created the links like these;

 

                                                <TextBlock Height="26" Foreground="White" FontSize="12"  Margin="0,10,22,0" HorizontalAlignment="Right" Width="116"><Hyperlink x:Name="filterProjectReviewsLink"   NavigateUri="http://google.com"><RunText="Filter Reviews"/></Hyperlink></TextBlock>

 

And then inside of regex genuis u used that tectblock link to run a hyperlink event(as aymen had  hyperlink event) to a define code and not necessarily a hyperlink to google.com

 

So can we do that here, because if i choose a textblock simialrly i cant run any other code

 

[HelloInsomnia 1103]

Actually I want to do the way you did it in the regex course regex genius, use a hyperlink but then run a define command and not necessarily a hypelink for which you created the links like these;

 

                                                <TextBlock Height="26" Foreground="White" FontSize="12"  Margin="0,10,22,0" HorizontalAlignment="Right" Width="116"><Hyperlink x:Name="filterProjectReviewsLink"   NavigateUri="http://google.com"><RunText="Filter Reviews"/></Hyperlink></TextBlock>

 

And then inside of regex genuis u used that tectblock link to run a hyperlink event(as aymen had  hyperlink event) to a define code and not necessarily a hyperlink to google.com

 

So can we do that here, because if i choose a textblock simialrly i cant run any other code

 

 

That code will be able to run any command, here is it slightly changed for example:

plugin command("UltimateUI.dll", "UI Load XAML", "<Border BorderThickness=\"0 0 0 1\" BorderBrush=\"Blue\"
                    Width=\"78\">
                <TextBlock x:Name=\"hyperlink\"
                       Foreground=\"Blue\"
                       Cursor=\"Hand\"
                       HorizontalAlignment=\"Center\"
                       Text=\"Run Any Code\"/>
            </Border>", "False", "False", "False", "BaseLight", "Blue")
plugin command("UltimateUI.dll", "UI Add Event", "hyperlink", "MouseLeftButtonDown", "PutAnyCodeHere")
define PutAnyCodeHere {
    alert("hi :)")
}

Not sure if I follow but I think this is what you want right? You can change that to run your code to filter reviews for example.

[cob007 19]

if i want to run the metro scroll on its own refreshing every few seconds as given by your example of cards in metro demo project would i have to tie it up to another event like binding element and run it that way

[HelloInsomnia 1103]

Update V 1.9

• Add Set Image Property
  • Note: you can already set image width and height using Set Property command
• Add Get Image Property
  • Note: you can already get image width and height using Get Property function
• Add Hyperlink Event

The Ultimate UI Plugin and source code have been updated.

[cob007 19]

this probably may not be necessary to implement, but if selected index property is added to list of UI set property command then it might work but this was just an idea and not necessary

If u see mahaapps metro page for the flip view control, they are talking about using selected index property to automatically scroll the images without user clicking the button

 

https://mahapps.com/controls/flipview.html

 

Automated scrolling (batteries not included)

Disabling the control buttons is useful when you want to provide an automated scrolling experience. This can be implemented by using a timer and by incrementing SelectedIndex by 1 until the index is equal to Items.Length - 1. At that point, you would reset SelectedIndex to 0.

 

 

I noticed that i could make changes to flipview control via the UI set property but since it does not have selected index i couldnt select that to make a custom command to auto scroll it.

 

Anyways this was just a suggestion and apart from tab control i dont think all the other properties use selected index

[HelloInsomnia 1103]

You can use the selected index from ListBox since FlipView and ListBox both inherit from the class Selector which has the SelectedIndex property.

 

Example:

plugin command("UltimateUI.dll", "UI Load XAML", "<Controls:FlipView x:Name=\"FlipViewTest\" Height=\"200\">
    <Controls:FlipView.Items>
        <Grid Background=\"#2E8DEF\">
            <TextBlock Text=\"1\"/>
        </Grid>
        <Grid Background=\"#00A600\">
            <TextBlock Text=\"2\"/>
        </Grid>
        <Grid Background=\"#BF1E4B\">
            <TextBlock Text=\"3\"/>
        </Grid>
    </Controls:FlipView.Items>
</Controls:FlipView>", "False", "False", "True", "BaseLight", "Purple")
plugin command("UltimateUI.dll", "UI Set ListBox Property", "SelectedIndex", "FlipViewTest", 1)
wait(2)
plugin command("UltimateUI.dll", "UI Set ListBox Property", "SelectedIndex", "FlipViewTest", 2)
wait(2)
plugin command("UltimateUI.dll", "UI Set ListBox Property", "SelectedIndex", "FlipViewTest", 0)

You can look in Visual Studio at the class for ListBox and FlipView and see what they inherit from. You can do this with any controls actually, if two controls inherit from the same parent class at some point then you should be able to use that to set or get properties if those properties are in Ultimate UI.

 

And to be clear I mean the properties on the shared parent class. You couldn't use a ListBox property that exists on the ListBox class on FlipView. Hope that makes sense.

[HelloInsomnia 1103]

Somebody asked me in PM for an example on how to change images based on dropdown, I am going to post the example I sent so others can benefit:

set(#image0,"https://www.aspicyperspective.com/wp-content/uploads/2013/05/IMG_8786-256x256.jpg","Global")
set(#image1,"https://www.aspicyperspective.com/wp-content/uploads/2016/12/snickerdoodle-sandwich-cookies-9-256x256.jpg","Global")
plugin command("UltimateUI.dll", "UI Load XAML", "<DockPanel>
            <ComboBox x:Name=\"selectImageComboBox\" 
                      DockPanel.Dock=\"Top\"
                      SelectedIndex=\"0\">
                <ComboBoxItem Content=\"Image 1\"/>
                <ComboBoxItem Content=\"Image 2\"/>
            </ComboBox>
            <Image x:Name=\"selectedImage\"
                   Width=\"256\"
                   Height=\"256\"/>
        </DockPanel>", "False", "False", "False", "BaseLight", "Blue")
ChangeImage()
plugin command("UltimateUI.dll", "UI Add ComboBox Event", "SelectionChanged", "selectImageComboBox", "ChangeImage")
define ChangeImage {
    if($comparison($plugin function("UltimateUI.dll", "$UI Get ComboBox Property", "SelectedIndex", "selectImageComboBox"),"=",0)) {
        then {
            plugin command("UltimateUI.dll", "UI Set Image Property", "Source", "selectedImage", #image0)
        }
        else {
            plugin command("UltimateUI.dll", "UI Set Image Property", "Source", "selectedImage", #image1)
        }
    }
}

[gandensang 11]

still waiting for sort row/colomn in datagrid

i hope its will available in next update

Thanks
 

[HelloInsomnia 1103]

still waiting for sort row/colomn in datagrid

i hope its will available in next update

Thanks

 

 

An update is being pushed right now so it won't be in this one but I'll see what I can do about this since the datagrid is customized its not so simple as push the header and it auto sorts. But I think I can do it while also adding filtering at the same time.

Update V 1.10

 

Added:

• Add DataGrid Button Column
• DataGrid Button Cell

These functions can be used on the DataGrid to add a button column. The buttons will be created for each row on the DataGrid and you can run a command from the button.

 

In order to use this you will want to get the selected row index of the datagrid - which will be the row the button was clicked. Use the function Get DataGrid Selected Index for this. From there you can get the necessary data using the function Get DataGrid Row.

 

[cob007 19]

 

An update is being pushed right now so it won't be in this one but I'll see what I can do about this since the datagrid is customized its not so simple as push the header and it auto sorts. But I think I can do it while also adding filtering at the same time.

Update V 1.10

 

Added:

• Add DataGrid Button Column
• DataGrid Button Cell

These functions can be used on the DataGrid to add a button column. The buttons will be created for each row on the DataGrid and you can run a command from the button.

 

In order to use this you will want to get the selected row index of the datagrid - which will be the row the button was clicked. Use the function Get DataGrid Selected Index for this. From there you can get the necessary data using the function Get DataGrid Row.

 

 

is it possible to add external style created with XAML instead of options with plugin because that can give more flexibility in terms of if we want to add corner radius or image to the button which is not possible and even have button as a hyperlink using external stying of buttons xaml,  i dont know if its possible or not but i just thought will ask

[HelloInsomnia 1103]

is it possible to add external style created with XAML instead of options with plugin because that can give more flexibility in terms of if we want to add corner radius or image to the button which is not possible and even have button as a hyperlink using external stying of buttons xaml,  i dont know if its possible or not but i just thought will ask

 

Should be possible, I'll have to double check later though to be sure.

[cob007 19]

Should be possible, I'll have to double check later though to be sure.

that would be great, also if we use table to datagrid, i know you mentioned image column not possible, but is there a way to add button columns if we use table to datagrid and not just the default add row by row. so when we do a table to datagrid all the button columns also added to the table automatically

[cob007 19]

does checkbox column work with table to datagrid

[Marani 80]

A few days ago upgraded Ubot to Dev just to be able to use Nick's plugin (picked this up too).

Haven't got my hand in it yet except watching all 3 vids. I'm sure that this plugin never let me down as Nick created and supports it.

 

Great job Nick and thanks for finding us a way to finally theme our bots in the best way (IMO) plus tons of features. 

[ATuringtest 14]

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 19]

A few days ago upgraded Ubot to Dev just to be able to use Nick's plugin (picked this up too).

Haven't got my hand in it yet except watching all 3 vids. I'm sure that this plugin never let me down as Nick created and supports it.

 

Great job Nick and thanks for finding us a way to finally theme our bots in the best way (IMO) plus tons of features. 

Yes it is one of the best plugins and many things must be hard to do because we are using ubot and not c language and nick has done a great job as usual like all his other products. Here are some small feature requests that are mostly related to datagrid if possible

 

1. Be able to bold text of cells, currently we can do a few things like add colour, font family etc but there is no bold

2. Stylize the column header w so that we can add a image instead of just text

3. able to update the individual datagrid cell text even after we add a row(this can be useful in say we have to update a task inside of a cell say while submitting a job and neeed to update status inside of datagrid cell

4. Able to stylize the buttons within the cells via xaml styling option and not just the options provided while adding a button now

5. Be able to uncheck or check the checkbox column because as of now we cannot check or uncheck it once we set it to true or false