I am trying to colorize my tablerows using customdata but i just dont understand how to do it.
In the code below u can see me trying to add customdata, it works but its not added to the tablerow. Instead, the one inside the text elements obviously adds it to the text, the second one only adds it to one header row above my column. Any helpers?
<k:TreeTable
id="treeTable"
selectionMode="Single"
enableColumnReordering="false"
visibleRowCountMode="Auto"
>
<k:columns>
<k:Column label="" id="test">
<k:template>
<Text text="{Description}" wrapping="false" class="myListItemClass">
<customData>
<core:CustomData key="mydata" value="{path: 'DrillState', formatter: '.formatter.colorString'}" writeToDom="true" />
</customData>
</Text>
</k:template>
<k:customData>
<core:CustomData key="mydata" value="{path: 'DrillState', formatter: '.formatter.colorString'}" writeToDom="true" />
</k:customData>
</k:Column>
</k:columns>
</k:TreeTable>
Related
Hi i have spend some days searching for the answer how to solve this
This is what i want, just made a image how it should look like
What is the best solution to use to solve this?
I tryed to do this with a Frame but it just allowed be to use 1 content .
Can i use more then one content in some way
( Content can just have one setup of fontcolor and fontsize and so on. )
I just get to this part
Here i try to put a label with margin with - so it go above.
But this is really bad to to. because i need to have the implementation under the frams. like this.
_stack.Children.Add(frame);
_stack.Children.Add(bordertext);
and when i fill the frame with content the lable apear in another position because how it relate to the margin when the Frame get higher.
But if i put the lable implementation above the Frame then it appear in the background of the frame
_stack.Children.Add(bordertext);
_stack.Children.Add(frame);
And the label get weard with the shadow that i cant figure out how to get rid of.
C#
Frame frame = new Frame
{
BorderColor = Color.Brown,
CornerRadius = 10,
HasShadow = false,
Margin = 10,
BackgroundColor = Color.White,
};
Label bordertext = new Label( );
bordertext.Text = "BorderText";
bordertext.Margin = new Thickness(40, -65,0 , 0);
bordertext.BackgroundColor = Color.White;
_stack.Children.Add(frame);
_stack.Children.Add(bordertext);
PART OF THE SOLUTION
#Jason 's solution to put
the Content in a Stacklayout and then put it in a Frame Solves the problem with having more then one text with different font,sizes and stuff.
But i put a text outside the Stacklayout so i can have the Text on the border. But because i put the Bordertext first and then the Frame. Then the Border text gets in the background.
If i put it after the Frame then i gets in the front. But then i have a big problem with dynamic text that the BorderText will appear very strange depending on how much text.
How i cant put the BorderText in front even if i implement in before so i cant move it down a little bit.
_stack.Children.Add(new Label { Text = "Bordertext", Margin = new Thickness(0, 0, 0, -25) });
_stack.Children.Add(_frame);
To compose a layout, first determine what boxes (rectangles) you need inside other boxes. Each "box" is some container (layout) type.
I see one box "A", the size of the parent-container, containing the border lines "B", overlaid by a box "C" that blocks part of one line, and contains a text "D".
I see a second box "E", inset slightly from the parent-container, which contains additional content "F".
To overlay multiple items, use a one-cell Grid, with children at (row,column) of 0,0 - which can be omitted because is default:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FormsApp1.MainPage">
<Grid BackgroundColor="Violet">
<!-- Border lines formed by one box visually "inside" another, via margins.
Instead use "Rectangle" if need rounded corners. -->
<BoxView BackgroundColor="Red" Margin="10"/>
<BoxView BackgroundColor="LightCoral" Margin="16"/>
<!-- Text "box" given size by putting inside a StackLayout. -->
<!-- Some of these dimensions may not be needed. -->
<StackLayout WidthRequest="300" HeightRequest="30">
<Label Text="Header Text" TextColor="Black" BackgroundColor="White" FontSize="18"
HorizontalOptions="Start"
WidthRequest="150" HeightRequest="30" Margin="20,0" Padding="20,0,0,0"/>
</StackLayout>
<!-- this contains your contents. -->
<StackLayout BackgroundColor="#2196F3" Padding="10" Margin="40">
<Label Text="Content line 1" HorizontalTextAlignment="Center" TextColor="White"/>
<Label Text="Content line 2" HorizontalTextAlignment="Center" TextColor="White"/>
</StackLayout>
</Grid>
</ContentPage>
"Positioning" is done via "Margin" and "Padding" properties.
I've used various colors, so you can see the parts of this layout. "ContentPage" wrapper might not be needed; use whatever your app expects as topmost container.
layout of group' frame' with header text:
I'm writing an app with NativeScript 6.4.1 and Angular 8.
On the home page of my app, I need to have a list of buttons with a label underneath the button.
I want the container that holds the button and the text to be the same width for all. If the text is too long it will go onto the next line rather than expand the size of the parent container.
I have tried to use FlexboxLayout for this purpose but I notice that the parent containers just expand:
https://play.nativescript.org/?template=play-ng&id=jbpqMk&v=5
I guess I need some flexiblity in the layout as well; maybe have the ability to configure if its 2 or 3 columns.
Would I be better off using GridLayout?
Here is a code snippet:
home.html
<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
<ns-home-button *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>
Desired Result:
Current Result:
Interestingly, the cells you've shown in your demo are properly aligned as per your flow specifications. Using a GridLayout would be possible, but not really ideal. The GridLayout would need all of its rows counted and specified, which is annoying, and it would also force its children to fit within it, rather than expand based on children (like FlexboxLayout or StackLayout).
Instead, just put a width on each item. The easiest two ways to do this are by wrapping each element:
<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
<StackLayout width="33%" *ngFor="let n of list">
<ns-home-button name="{{ n.name }}"></ns-home-button>
</StackLayout>
</FlexboxLayout>
or by modifying the component spec:
<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
<ns-home-button width="33%" *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>
#Input() width: string;
<FlexboxLayout [width]="width" ...>
...
</FlexboxLayout>
I'm using d3.js to draw a layout graph like this one: https://bl.ocks.org/mbostock/950642
But I found that it's very difficult to copy-and-paste the node's label. Take the above link as an example, I can't drag the text to select any sequence. I can only double-click the label to select a certain char sequence.
If I try to select the text with a special char like Mlle.Vaubois, I can only get Mlle or Vaubois selected, I cannot get the whole string Mlle.Vaubois selected. (See the below picture)
Moreover, I can't select arbitrary char sequence inside that string. For example, I can't select the middle two letters: ll inside Mlle.Vaubois. The highlighting stopped right after the first l is selected. (See below:)
I just want to be able to select any sequence as I want, like in a browser. For example, I can select rce La from the HTML text: Labeled Force Layout as below. Then I can Ctrl + C and Ctrl + V as I wish.
This issue is not just for d3.js, because another more general SVG example also has this issue: http://jsfiddle.net/wPYvS/
I don't know why SVG handles text selection so different with normal HTML text in a browser or any mainstream text editor? How to solve it? Thanks.
The following example adds a click handler to all the "nodes" (ie. class="node"), which will select all the text in the node.
var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.target);
}
<svg width="500" height="200">
<g class="node" transform="translate(275.4819543667187,131.9805407488932)">
<image xlink:href="https://github.com/favicon.ico" x="-8" y="-8" width="16" height="16"> </image>
<text dx="12" dy=".35em">Mlle.Vaubois</text>
</g>
</svg>
I set a tooltip on a text element in JavaFx, everything works as long as I do not hover mouse on the text, the tooltip does not get displayed.
<Text layoutX="329.0" layoutY="202.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Tcond[C]" textAlignment="CENTER">
<Tooltip text="'%Empty_Bundle'"/>
</Text>
That's the fxml code which should create a tooltip on this text.
How to fix it without creating assign text to an object in my view controller and setting on the tooltip by using .setTooltp() method?
In FXML, if you embed one instance element directly inside another, without a property element, it is used to set the property annotated as the #DefaultProperty on the outer instance element.
If you check the documentation for Text you will see that the default property is "text": so your FXML is equivalent to
<Text layoutX="329.0" layoutY="202.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Tcond[C]" textAlignment="CENTER">
<text>
<Tooltip text="'%Empty_Bundle'"/>
</text>
</Text>
In other words, you are trying to set the text of your Text object to the tooltip.
Text doesn't actually have a setTooltip(...) method at all; that method is defined in the Control class, of which Text is not a subclass. The only way to set a tooltip on a Text instance is by using the Tooltip.installTooltip(...) method, which you can only call from the controller (there is no FXML equivalent to calling this static method).
Your other option, if it works, would be to replace the Text with a Label:
<Label layoutX="329.0" layoutY="202.0" text="Tcond[C]" textAlignment="CENTER">
<tooltip>
<Tooltip text="'%Empty_Bundle'"/>
</tooltip>
</Label>
Note that Label does not allow you to directly configure the stroke, as a Text does, so you would lose that functionality (or at least have to use CSS instead).
Please note that this question is specific to Silverlight 5. There are lots of similar questions floating around, but often they are about WPF or previous Silverlight versions. Others target Silverlight 5, but are about controls other than DataGrid. I have been unable to find an existing question that asks for exactly the same thing as this one; at least none with an answer that works for me.
Let's assume I have this really simple DataGrid (XAML and C# code further down), which is bound to a collection of a INotifyPropertyChanged type having two properties, Selected and Text:
I would like to bind each row's background color to its data item's Selected property (using some bool-to-Brush converter). The usual row states' (normal, selected, mouse over, etc.) visual effects and transitions should not be affected; that is, normal rows will be colored, alternate rows will be a little lighter, mouse-over-ed rows will be slightly darker, selected rows will be even darker than that, etc.
Some apparent solutions seen elsewhere:
I have searched for a solution for hours, and there are many similar questions floating around, but none of the answers seem to apply to Silverlight 5, or they don't work. There appear to be several approaches to this:
Override the DataGridRow control template and bind its BackgroundRectangle's Background property:
<sdk:DataGrid …>
<sdk:DataGrid.RowStyle>
<Style TargetType="sdk:DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
…
<Rectangle x:Name="BackgroundRectangle" …
Background="{Binding Selected, Converter={StaticResource boolToBrush}}" />
…
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGrid.RowStyle>
…
</sdk:DataGrid>
This works initially, and visual states are correctly rendered (because the DataGrid visual states only affect opacity of the BackgroundRectangle; see the default control template definition for details).
The problem with this is that row background colors won't change when the bound items' Selected properties change value. It's as if the {Binding} had a Mode=OneTime.
Also, I've read that data bindings in control templates should be avoided. TemplateBindings are fine in a control template, but regular Bindings perhaps don't belong here.
Change all columns to <sdk:DataGridTemplateColumn> and use a data template:
<sdk:DataGrid …>
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="Selected">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Background="{Binding Selected, Converter={StaticResource boolToBrush}}">
<CheckBox IsChecked="{Binding Selected}" />
</Grid>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
… <!-- repeat the above for each column -->
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
…
</sdk:DataGrid>
This is even worse. The cells get the right background colors, but the data grid's various visual states are no longer properly applied. Also, each column has to be turned into a template column. And third, when the bound properties change value, the background colors are not updated.
Use Expression Blend data triggers (types from the System.Windows.Interactivity and Microsoft.Expression.Interactivity.Core namespaces). To be honest, I haven't been able to work out how this is supposed to work at all.
Question:
I really don't want to resort to imperative code-behind where I do this manually. But how can I do what I want in XAML, in a proper way that also honors the DataGridRow visual states and behavior, and updates the row background when the bound property changes?
Could someone give me a XAML example how to bind each row's background color to one of its bound item's properties in such a way?
XAML and C# code for the above data grid:
<UserControl x:Class="SomeApplication.MainView"
…
xmlns:local="clr-namespace:SomeApplication"
xmlns:sdk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
<!-- sample data context -->
<UserControl.DataContext>
<local:MainViewModel>
<local:MainViewModel.Things>
<local:ThingViewModel Text="A" />
<local:ThingViewModel Text="B" />
<local:ThingViewModel Text="C" />
<local:ThingViewModel Text="D" Selected="True" />
<local:ThingViewModel Text="E" />
</local:MainViewModel.Things>
</local:MainViewModel>
</UserControl.DataContext>
<Grid>
<sdk:DataGrid ItemsSource="{Binding Things}" AutoGenerateColumns="False">
<sdk:DataGrid.Columns>
<sdk:DataGridCheckBoxColumn Header="Selected" Binding="{Binding Selected}" />
<sdk:DataGridTextColumn Header="Text" Binding="{Binding Text}" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</UserControl>
namespace SomeApplication
{
public interface IMainViewModel
{
ObservableCollection<ThingViewModel> Things { get; }
}
public interface IThingViewModel : INotifyPropertyChanged
{
bool Selected { get; set; }
string Text { get; set; }
}
// straightforward implementations, omitted for brevity's sake:
public partial class MainViewModel : IMainViewModel { }
public partial class ThingViewModel : IThingViewModel { }
}
One thing that appears to work is a combination of overriding the control template and putting a Expression Blend data trigger inside the BackgroundRectangle.
Start with the default control template for DataGridRow (which you can find on the MSDN page 'DataGrid Styles and Templates'). The only thing that needs to change is the <Rectangle x:Name="BackgroundRectangle">:
<!--
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expressions.Interactions"
-->
<sdk:DataGrid …>
<sdk:DataGrid.RowStyle>
<Style TargetType="sdk:DataGridRow">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
… <!-- use DataGridRow standard control template, except for this: -->
<Rectangle x:Name="BackgroundRectangle" …
Background="{Binding Selected, Converter={StaticResource boolToBrush}}">
<i:Interaction.DataTriggers>
<ei:PropertyChangedTrigger Binding="{Binding Selected}" Value="True">
<ei:PropertyChangedTrigger.Actions>
<ei:ChangePropertyAction TargetName="BackgroundRectangle"
PropertyName="Fill"
Value="{Binding Selected, Converter={StaticResource boolToBrush}}" />
</ei:PropertyChangedTrigger.Actions>
</ei:PropertyChangedTrigger>
</i:Interaction.DataTriggers>
<Rectangle>
…
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</sdk:DataGrid.RowStyle>
…
</sdk:DataGrid>
Since a row's background rectangle is inside the control template, and that background should change with the data, it seems that it's actually unavoidable to put a data binding inside the control template.