Jump to content
UBot Underground

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


Recommended Posts

sorry what i meant was this as u mentioned it will work only with text columns as below, can the table to datagrid work with image column. Its ok if it cannot work with button column but if a update can be made to with table to datagrid image column then that would be great

 

 

Update version 1.5

 

Added - Table To DataGrid (still experimental and likely will change)

Fixed - Events not working correctly

 

Note: Table To DataGrid will still require you to initialize the DataGrid. It will only work with text columns for now, so your entire DataGrid should be text columns to use this. This command is still early but it is functional and so I included it in this update along with the bug fix.

Link to post
Share on other sites
  • Replies 175
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Update version 1.4   Added - Wiki with lots of information can now be found here: https://github.com/nicklikescoffee/UltimateUiPlugin/wiki Added - Get DataGrid Cell Value - gets the value of the cell

Bought this and I'm super impressed - barely scratched the surface and can't believe how powerful it is. It's literally the missing piece of the puzzle. After dealing with frustrations of the old XAML

Update version 1.7   Fixed - Bug that caused button clicks to freeze application

Posted Images

 

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.

 

 

ive sent you a PM with regards to the query

Link to post
Share on other sites

for the Change DataGrid Text Cell Value can we change the colour of the text as well. Because this helps in case we have a text that is in submission and then done, we can change the color to done to green to show the completion of the job.

  • Like 1
Link to post
Share on other sites

Somebody was asking about the TreeView commands, they work the same as most of the others but here is a brief example of some of them:

plugin command("UltimateUI.dll", "UI Load XAML", "<TreeView Name=\"myTreeViewEvent\">
            <TreeViewItem Header=\"Employee1\" x:Name=\"emp1\">
                <TreeViewItem Header=\"Jesper Aaberg\" x:Name=\"jesper\" />
                <TreeViewItem Header=\"Employee Number\">
                    <TreeViewItem Header=\"12345\" />
                </TreeViewItem>
                <TreeViewItem Header=\"Work Days\">
                    <TreeViewItem Header=\"Monday\" />
                    <TreeViewItem Header=\"Tuesday\" />
                    <TreeViewItem Header=\"Thursday\" />
                </TreeViewItem>
            </TreeViewItem>            
        </TreeView>", "False", "False", "False", "BaseLight", "Blue")
plugin command("UltimateUI.dll", "UI Add TreeViewItem Event", "Expanded", "emp1", "Expanded")
plugin command("UltimateUI.dll", "UI Add TreeViewItem Event", "Collapsed", "emp1", "Collapsed")
alert("expanding")
wait(0.5)
plugin command("UltimateUI.dll", "UI Set TreeViewItem Property", "IsExpanded", "emp1", "true")
define Expanded {
    alert("{$plugin function("UltimateUI.dll", "$UI Get TreeViewItem Property", "Header", "emp1")} expanded")
}
define Collapsed {
    alert("{$plugin function("UltimateUI.dll", "$UI Get TreeViewItem Property", "Header", "emp1")} collapsed")
}
  • Like 1
Link to post
Share on other sites

Update V 1.13

 

Added
  • Padding, Font Family, Font Size, Foreground, Background, Horizontal Alignment, Vertical Alignment parameters to Change DataGrid Text Cell
  • Max Width, Max Height, Horizontal Alignment, Vertical Alignment parameters to Change DataGrid Image Cell
  • Padding, Font Family, Font Size, Foreground, Background, Horizontal Alignment, Vertical Alignment parameters to Change DataGrid Button Cell
Breaking Changes
  • Rename: Change DataGrid Button Cell Value -> Change DataGrid Button Cell
  • Rename: Change DataGrid CheckBox Cell Value -> Change DataGrid CheckBox Cell
  • Rename: Change DataGrid Image Cell Value -> Change DataGrid Image Cell
  • Rename: Change DataGrid Text Cell Value -> Change DataGrid Text Cell

 

Note: these names provide better longevity to the software and flexibility to change more than just the values of the cells.

  • Like 2
Link to post
Share on other sites
  • 2 weeks later...

UPDATE:

 

I totally forgot about 'Set" commands and using it solved my issue. this post can be ignored.

*****************************************************************************************************************

Nick,

 

I loaded the XAML code in an On Load command, but the data (in front of the labels) doesn't populate till the bot is finished doing it's job, then I do a Run Node on the Load XAML node manually to see the labels' text is updated with data.

 

How can I populate data in the run time?

Edited by Marani
Link to post
Share on other sites

Hi Nick,

 

I sent an email with my question but posted here in case the answer may be useful to others if the glitch is widespread and not related to my setup:

 

After adding sorting logic hooked to a Datagrid event header click, when updating the grid with the sorted table the Table to Datagrid command works instantly, which is awesome.

 

The problem is, when the table has formatting or special cells/columns that aren't text-based the table to Datagrid command isn't able to add the cells with images or buttons, styling, etc.

 

So I clear all Datagrid rows with the command and then loop through the table to add the rows one at a time. Unfortunately, when doing this the table clears and then doesn't update in the interface until after a fairly significant delay - it's like the UI locks up.

 

I haven't been able to find a way around this delay - do you have any suggestions on how the grid can update in realtime as the rows are added to remove the lag?

 

Side note: thanks for adding the tree view stuff, I haven't gotten a chance to experiment with it much yet but it will definitely add to the UX for bots so I'm excited to dig in.

 

Thanks again for all your excellent work on the plugin - very much appreciated!

Link to post
Share on other sites

Hi Nick,

 

I sent an email with my question but posted here in case the answer may be useful to others if the glitch is widespread and not related to my setup:

 

After adding sorting logic hooked to a Datagrid event header click, when updating the grid with the sorted table the Table to Datagrid command works instantly, which is awesome.

 

The problem is, when the table has formatting or special cells/columns that aren't text-based the table to Datagrid command isn't able to add the cells with images or buttons, styling, etc.

 

So I clear all Datagrid rows with the command and then loop through the table to add the rows one at a time. Unfortunately, when doing this the table clears and then doesn't update in the interface until after a fairly significant delay - it's like the UI locks up.

 

I haven't been able to find a way around this delay - do you have any suggestions on how the grid can update in realtime as the rows are added to remove the lag?

 

Side note: thanks for adding the tree view stuff, I haven't gotten a chance to experiment with it much yet but it will definitely add to the UX for bots so I'm excited to dig in.

 

Thanks again for all your excellent work on the plugin - very much appreciated!

Hi drew

 

I had the same issue and i have made the same workaroud. Nick said he will work on doing a table to datagrid with images as at the moment table to datagrid does not allow images to be

used directly AS TABLE TO DATAGRID can only work with text column at the moment

Link to post
Share on other sites

Yeah that would be a good fix for images, but I'm also worried about button columns, centering text in certain columns, and other formatting that might be tricky to push through in a single table to Datagrid call - I like the looping and adding option so data can be altered as added to the grid, if we could get rid of the delay and have the grid start rendering the new rows as they're added in realtime

Link to post
Share on other sites
 

Update V 1.14

 

Added

  • Padding, Font Family, Font Size, Foreground, Background, Horizontal Alignment, Vertical Alignment parameters to Table To DataGrid
Fixed
  • Bug where Change DataGrid Text Cell would throw an error when using Table To DataGrid
  • Removed extra space at bottom of DataGrid
Breaking Changes
  • Table To DataGrid has added properties which will break that command so you will need to update it
Link to post
Share on other sites

Table To DataGrid has added properties which will break that command so you will need to update it

 

thanks nick, does datagrid work with image cell now

 

The datagrid can use images yes. Table to datagrid cannot though right now.

Link to post
Share on other sites

Nick,

Can I have multi-line cells in datagrid? If yes, how should I do that?

Thanks

 

I think this is what you mean:

 

plugin command("UltimateUI.dll", "UI Load XAML", "<DataGrid x:Name=\"dg\"/>", "False", "False", "False", "BaseLight", "Blue")
plugin command("UltimateUI.dll", "UI Initialize DataGrid", "dg", "{$plugin function("UltimateUI.dll", "$UI Add DataGrid Text Column", "Name")}{$plugin function("UltimateUI.dll", "$UI Add DataGrid Text Column", "Age")}", 16, "Arial", "", "")
plugin command("UltimateUI.dll", "UI Add DataGrid Row", "dg", "{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", "Bob", "", "Arial", 12, "", "", "Center", "Center")}{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", 36, "", "Arial", 12, "", "", "Center", "Center")}")
plugin command("UltimateUI.dll", "UI Add DataGrid Row", "dg", "{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", "Jane
Steve", "", "Arial", 12, "", "", "Center", "Center")}{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", 29, "", "Arial", 12, "", "", "Center", "Center")}")
plugin command("UltimateUI.dll", "UI Add DataGrid Row", "dg", "{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", "Taylor", "", "Arial", 12, "", "", "Center", "Center")}{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", 22, "", "Arial", 12, "", "", "Center", "Center")}")
plugin command("UltimateUI.dll", "UI Add DataGrid Row", "dg", "{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", "Joe", "", "Arial", 12, "", "", "Center", "Center")}{$plugin function("UltimateUI.dll", "$UI DataGrid Text Cell", 41, "", "Arial", 12, "", "", "Center", "Center")}")
Link to post
Share on other sites

Actually I directly use "Table to Datagrid" command without using "UI Add DataGrid Row" (adding row command seems to work slow, isn't it?).

 

So I first add new lines to the list of items(which is stroed in a #var), then convert the #var to a list, and add that list as a column to the table, then convert the table to the datagrid. it works but I'll miss those new lines in the datagrid.

Link to post
Share on other sites

Actually I directly use "Table to Datagrid" command without using "UI Add DataGrid Row" (adding row command seems to work slow, isn't it?).

 

So I first add new lines to the list of items(which is stroed in a #var), then convert the #var to a list, and add that list as a column to the table, then convert the table to the datagrid. it works but I'll miss those new lines in the datagrid.

 

Can you post some code that is always helpful to replicate an issue.

Link to post
Share on other sites
  • 2 weeks later...

Hi Nick,

 

Hope all is well! Thank you for the newest rounds of updates you released in the past month - I meant to follow up sooner but time got away from me.

 

The sort table then table to datagrid works much faster than the adding individual rows, and allow for column sorting with the event hooks for data grid headers - super awesome!

 

I purchased the source code and have been trying to go through on how to achieve this but I'm stumped, was hoping you might be able to shed some insight on how you'd do it (or add it as an update if possible):

 

Import Table to Datagrid but look at the column type and if it's a checkbox, have True or False render the checkboxes for that column as checked or unchecked.

 

I'm sure it can be done but I'm having trouble wrapping my head around detecting that and rendering correctly, but most of my grids have a checkbox column so I'm stuck on sorting and re-rendering grids without doing the slower loop add row method.

 

Additionally, I know with Aymens datagrid plugin we could set column widths and pass a * or 'auto' (I can't remember which) to a column (I believe the syntax was something like if you wanted 5 columns with the middle row taking up the remaining available space, you would set the width in the properties like 25|100|*|100|50 (or auto where the * is). Would it be possible to replicate that? A lot of my grids look really compressed on wider screens and it would add a lot of polish to the interfaces.

 

EDIT: Also, I forgot to mention - when using a context menu (i added one to a data grid) when the associated function runs after clicking the menu item, if the operation takes a few seconds to change (i.e. - scraping a webpage to update the datagrid row's cell values - can be recreated by just adding a 5 second wait in the called function) the context menu stays open and the interface locks up until the function has completed. Is there any workaround for this?

 

Thanks again for this awesome plugin, it's really been a game-changer. I still haven't gotten to dive much into tree views but I really appreciate that being added, working on refactoring a few bots and going to utilize them instead of the multiple combo boxes I was using as a workaround.

Edited by drewness
Link to post
Share on other sites
  • 3 weeks later...
  • 1 month later...

i want the togggle switch metro datagrid to be like this but im not able to do add this in the final ubot LOAD XAML UI.

In that it ends up looking like another toggle switch, like the one you show in the training video.

 

this is the code i used and although in xaml UI it shows exactly like this the windows 10 style toggle switch like the link of mahaapps below, in the final UI inside Uobt it shows like , like the one you show in the training video.which is the normal toggle switch and not windows 10 stylr

 

                                        <StackPanel Grid.Column="0" Margin="220,120,0,0" Height="167" VerticalAlignment="Top">
                                            <Controls:ToggleSwitch  x:Name="metroProgressBar" Header="Toggle Switch Sample"
                    
                     VerticalAlignment="Stretch"/>
                                        </StackPanel>

 

 

 

https://mahapps.com/docs/controls/toggleswitch

Link to post
Share on other sites

Update v 1.15 - over 7,000+ icons added

 

Added

  • Material Icons
  • FontAwesome Icons
  • Modern Icons
  • Metro Demo With Icons demo project
Fixed
  • Metro Demo Project change static resources to dynamic
  • Metro Demo Project fix issue with load xaml

 

How To Use Icons

 

In your VS project add these packages:

 

https://www.nuget.org/packages/MahApps.Metro.IconPacks.FontAwesome/

https://www.nuget.org/packages/MahApps.Metro.IconPacks.Material/

https://www.nuget.org/packages/MahApps.Metro.IconPacks.Modern/

 

Then add the following namespaces:

xmlns:Material="clr-namespace:MahApps.Metro.IconPacks;assembly=MahApps.Metro.IconPacks.Material"
xmlns:FontAwesome="clr-namespace:MahApps.Metro.IconPacks;assembly=MahApps.Metro.IconPacks.FontAwesome"
xmlns:Modern="clr-namespace:MahApps.Metro.IconPacks;assembly=MahApps.Metro.IconPacks.Modern"

Now you can use icons in the following way:

<Material:PackIconMaterial Kind="Account" />
<Modern:PackIconModern Kind="User" />
<FontAwesome:PackIconFontAwesome Kind="UserSolid" />
Link to post
Share on other sites

i want the togggle switch metro datagrid to be like this but im not able to do add this in the final ubot LOAD XAML UI.

In that it ends up looking like another toggle switch, like the one you show in the training video.

 

this is the code i used and although in xaml UI it shows exactly like this the windows 10 style toggle switch like the link of mahaapps below, in the final UI inside Uobt it shows like , like the one you show in the training video.which is the normal toggle switch and not windows 10 stylr

 

                                        <StackPanel Grid.Column="0" Margin="220,120,0,0" Height="167" VerticalAlignment="Top">

                                            <Controls:ToggleSwitch  x:Name="metroProgressBar" Header="Toggle Switch Sample"

                    

                     VerticalAlignment="Stretch"/>

                                        </StackPanel>

 

 

 

https://mahapps.com/docs/controls/toggleswitch

 

The new version looks like that but updating would break things for everyone so I'll have to see if there is another way.

Link to post
Share on other sites

1. As you see in the image,  i want the progress bar with values to be adjacent to the text. I reckon this was done using list view, list view contains text and each text has proggress bar with values, is this something we can do with list view with ultimate UI

post-16700-0-05194900-1602582981_thumb.png

Link to post
Share on other sites
  • 10 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...