Jump to content



Photo

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


  • Please log in to reply
155 replies to this topic

#141 nurzaga

nurzaga

    Member

  • Fellow UBotter
  • PipPip
  • 21 posts
  • OS:Windows 8
  • Total Memory:6Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 05 May 2020 - 07:23 PM

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



#142 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 09 May 2020 - 12:28 PM

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

 

giphy.gif

 

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.



#143 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 09 May 2020 - 09:27 PM

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



#144 cob007

cob007

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 337 posts
  • OS:Windows 7
  • Total Memory:2Gb
  • Framework:v3.5
  • License:Developer Edition

Posted 10 May 2020 - 07:23 PM

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.microso...-a-user-control



#145 drewness

drewness

    Advanced Member

  • Members
  • PipPipPip
  • 165 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 24 May 2020 - 07:36 PM

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!

#146 sunny9495

sunny9495

    Advanced Member

  • Members
  • PipPipPip
  • 228 posts
  • LocationIndia
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 29 May 2020 - 06:05 AM

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



#147 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 04 June 2020 - 12:00 PM

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

 

https://docs.microso...-a-user-control

 

Drag and drop is explained here: https://github.com/n...i/Drag-and-Drop



#148 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 17 June 2020 - 10:19 AM

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.



#149 cob007

cob007

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 337 posts
  • OS:Windows 7
  • Total Memory:2Gb
  • Framework:v3.5
  • License:Developer Edition

Posted 17 June 2020 - 11:24 AM

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



#150 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 17 June 2020 - 12:21 PM

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?



#151 cob007

cob007

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 337 posts
  • OS:Windows 7
  • Total Memory:2Gb
  • Framework:v3.5
  • License:Developer Edition

Posted 17 June 2020 - 08:14 PM

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.



#152 cob007

cob007

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 337 posts
  • OS:Windows 7
  • Total Memory:2Gb
  • Framework:v3.5
  • License:Developer Edition

Posted 18 June 2020 - 01:02 PM

 

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



#153 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 24 June 2020 - 02:03 PM

Update V 1.12

 

Added
  • Change DataGrid CheckBox Cell Value
  • Set TreeViewItem Property
  • Get TreeViewItem Property
  • Add TreeViewItem Event


#154 cob007

cob007

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 337 posts
  • OS:Windows 7
  • Total Memory:2Gb
  • Framework:v3.5
  • License:Developer Edition

Posted 02 July 2020 - 01:20 AM

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.



#155 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 02 July 2020 - 12:33 PM

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")
}


#156 HelloInsomnia

HelloInsomnia

    Advanced Member

  • Moderators
  • 3307 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 02 July 2020 - 01:28 PM

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users