custom element by code in datagrid

07 Nov 2013, 17:27

Hi
I'm a new really new user of noesis.
I can now understand some concepts of it ! but i still have somes

i'm trying to acheive this !
https://drive.google.com/file/d/0B7tPUW ... sp=sharing

My question is how can i add a custom button with an image how is represent a particular item to a data grid.
i already try with a standard button and it work well but who with custom element like this ?

I hope you can understand my question, i'm french and not a really good english speaker.

And thank you for this amazing gui

08 Nov 2013, 17:33

Sorry, but I think I don't understand your question correctly.

If you are asking about how to layout something like a data grid, you should use a Grid panel container. We can help you with the xaml code if you don't know how to accomplish the layout you want.

If you are asking about how to place content inside a button, thanks to NoesisGUI composition capabilities, you can add any content you want to the button:

<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="ok-icon.png" Margin="5,10"/>
        <TextBlock Text="OK" Margin="5,10" />
    </StackPanel>
</Button>

If you want that the content of the button be a visual copy of another element in the interface you can use a VisualBrush:

<StackPanel>
    <TextBlock x:Name="Item" Text="Item" />
    <Button Width="100" Height="50">
        <Button.Background>
            <VisualBrush Visual="{Binding ElementName=Item}" />
        </Button.Background>
    </Button>
</StackPanel>

Hope this solves your doubts

08 Nov 2013, 21:57

thanks you for the reply !

You answer in fact a the first part of my question, now imagine i wan't to add this button to a datagrid by code at runtime in unity.

<StackPanel>
    <TextBlock x:Name="Item" Text="Item" />
    <Button Width="100" Height="50">
        <Button.Background>
            <VisualBrush Visual="{Binding ElementName=Item}" />
        </Button.Background>
    </Button>
</StackPanel>

i wan't to generate a tab with a list of item who are present in my scene.
So i think i do this by c# part in unity but i didn't see how can i generate it ?

09 Nov 2013, 01:49

Assuming you have the following xaml:

<WrapPanel x:Name="container" />

You can add items dynamically to that panel doing the following:

using UnityEngine;
using System.Collections;
using Noesis;

public class AddItemsTest : MonoBehaviour
{
    void Start()
    {
        NoesisGUIPanel gui = GetComponent<NoesisGUIPanel>();
        FrameworkElement root = gui.GetRoot<FrameworkElement>();

        Panel container = root.FindName<Panel>("container");
        Button btn = new Button("Item Name");
        container.GetChildren().Add(btn);
    }
}

09 Nov 2013, 11:35

Thanks for the reply and sorry i wasn't very clear for my asking !

In fact i made a control in blend it is a rectangle shape with an image in and after i convert it to a button control. In unity i can see this control correctly, but i wan't to add this kind of custom element i made in blend by code in unity at runtime. i tryed with standard button with "getChildren.add" but i don't how to do with a specific element made by me.

What i try to do is a inventory close like it

http://www.google.fr/imgres?sa=X&rlz=1C ... 0,s:0,i:82

Thanks you for your patience

11 Nov 2013, 13:44

This kind of inventory can be made using a custom button template and modifying the background property for each item in the inventory.

You can have the icons of the inventory in a resource dictionary using an image atlas. For example:

<!-- Created using Noesis XAML exporter for TexturePacker (http://www.texturepacker.com) -->
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ImageBrush x:Key="item7" ImageSource="InventoryAtlas.png"
        Viewbox="2,2,26,26" ViewboxUnits="Absolute" Stretch="Fill"/>
    <ImageBrush x:Key="item6" ImageSource="InventoryAtlas.png"
        Viewbox="30,2,26,26" ViewboxUnits="Absolute" Stretch="Fill"/>
    <ImageBrush x:Key="item5" ImageSource="InventoryAtlas.png"
        Viewbox="2,30,26,26" ViewboxUnits="Absolute" Stretch="Fill"/>
    <ImageBrush x:Key="item4" ImageSource="InventoryAtlas.png"
        Viewbox="30,30,26,26" ViewboxUnits="Absolute" Stretch="Fill"/>
    <ImageBrush x:Key="item3" ImageSource="InventoryAtlas.png"
        Viewbox="2,58,26,26" ViewboxUnits="Absolute" Stretch="Fill"/>
    <ImageBrush x:Key="item2" ImageSource="InventoryAtlas.png"
        Viewbox="30,58,26,26" ViewboxUnits="Absolute" Stretch="Fill"/>
    <ImageBrush x:Key="item1" ImageSource="InventoryAtlas.png"
        Viewbox="2,86,26,26" ViewboxUnits="Absolute" Stretch="Fill"/>

</ResourceDictionary>

Then reference them from your xaml:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="300">

	<Grid.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="Atlas/InventoryAtlas.xaml"/>
			</ResourceDictionary.MergedDictionaries>
			<ControlTemplate x:Key="InventoryItemTemplate" TargetType="Button">
				<Border CornerRadius="4" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
					<Grid>
						<Border CornerRadius="3" BorderThickness="2">
							<Border.BorderBrush>
								<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
									<GradientStop Offset="0.1"/>
									<GradientStop Color="#7FFFFFFF"/>
								</LinearGradientBrush>
							</Border.BorderBrush>
						</Border>
						<Border CornerRadius="3" BorderThickness="1">
							<Border.BorderBrush>
								<LinearGradientBrush EndPoint="0.5,0" StartPoint="0,0" SpreadMethod="Reflect">
									<GradientStop Offset="0.15"/>
									<GradientStop Color="#26FFFFFF"/>
								</LinearGradientBrush>
							</Border.BorderBrush>
						</Border>
					</Grid>
				</Border>
			</ControlTemplate>
			<Style x:Key="InventoryItemStyle" TargetType="Button">
				<Setter Property="BorderBrush" Value="Black"/>
				<Setter Property="Background" Value="#4C000000"/>
				<Setter Property="Template" Value="{StaticResource InventoryItemTemplate}"/>
				<Setter Property="Margin" Value="5"/>
			</Style>
		</ResourceDictionary>
	</Grid.Resources>
	
	<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Width="160"
            Background="#4C343434" VerticalAlignment="Center" HorizontalAlignment="Center">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition/>
			</Grid.RowDefinitions>
			<Border Background="#19FFFFFF" CornerRadius="4.5,4.5,0,0" Padding="2" >
				<TextBlock Text="Inventory" HorizontalAlignment="Center"
				    Foreground="White" FontWeight="Bold" FontSize="10"/>
			</Border>
			<WrapPanel Grid.Row="1" ItemWidth="36" ItemHeight="36" Margin="5">
				<Button Style="{StaticResource InventoryItemStyle}"
				    Background="{StaticResource item1}"/>
				<Button Style="{StaticResource InventoryItemStyle}"
				    Background="{StaticResource item2}"/>
				<Button Style="{StaticResource InventoryItemStyle}"
				    Background="{StaticResource item3}"/>
				<Button Style="{StaticResource InventoryItemStyle}"
				    Background="{StaticResource item4}"/>
				<Button Style="{StaticResource InventoryItemStyle}"
				    Background="{StaticResource item5}"/>
				<Button Style="{StaticResource InventoryItemStyle}"
				    Background="{StaticResource item6}"/>
				<Button Style="{StaticResource InventoryItemStyle}"
				    Background="{StaticResource item7}"/>
				<Button Style="{StaticResource InventoryItemStyle}"/>
				<Button Style="{StaticResource InventoryItemStyle}"/>
				<Button Style="{StaticResource InventoryItemStyle}"/>
				<Button Style="{StaticResource InventoryItemStyle}"/>
				<Button Style="{StaticResource InventoryItemStyle}"/>
			</WrapPanel>
		</Grid>
	</Border>

</Grid>

: inventory.png (15.57 KiB) Viewed 4953 times

15 Nov 2013, 14:24

Wouahh thanks for your reply, it make it a little more clear for me.
I saw a post for runtime load pict on the forum.

I'm playing with blend and your tool for now, and i definitivly adopt it.

15 Nov 2013, 14:39

Good!

We are very busy with the new release. But as soon as we release it, I think we could create a sample for an inventory system based on the sample you posted here.

16 Nov 2013, 13:49

It 'will be very nice.

I'm impatient to see the next release !

GeorgeR · 19 Mar 2018, 05:18

...5 years later, i'd like to see this example too

custom element by code in datagrid

custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Re: custom element by code in datagrid

Who is online