I am using Picker and it has two lines one on top and one under the selection screen. I can't remove it or set it to transparent. I believe the border is for the Picker.Item and not the overall Picker, but I am not sure.
borderWidth, BaackgroundColor none will work.
<Picker style={width:'50%', padding: 20, height: 100} itemStyle={height:100}}
<Picker.item label="one" value="one" />
</Picker>
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:
You can see from the image below, the chart lines don't go all the way to the edge of the StackLayout container. I've tried adding negative margins on the StackLayout but they're inconsistent depending on how much data I have in the chart and the margins can fluctuate. And between Android & iOS, the margins are always different.
Nativescript Playground sample:
play.nativescript.org/?template=play-ng&id=I8lOBP
This is the bad version:
In the image, you'll notice on the right and left edges, there's dark strips of the emulator window. I'm looking for a way for the red area line to touch those edges. It's hard to see in the image but the bottom also needs to touch the bottom of the StackLayout container.
<StackLayout>
<RadCartesianChart
height="100%"
width="100%"
class="default-background">
<CategoricalAxis
lineColor="#f5f5f5"
hidden="true"
lineHidden="true"
lineThickness="1"
labelLayoutMode="Inner"
tkCartesianHorizontalAxis>
</CategoricalAxis>
<LinearAxis
lineColor="#f5f5f5"
hidden="true"
lineHidden="true"
lineThickness="1"
labelLayoutMode="Inner"
[maximum]="max"
[minimum]="min"
tkCartesianVerticalAxis>
</LinearAxis>
<AreaSeries
tkCartesianSeries
seriesName="Area"
showLabels="false"
categoryProperty="Date"
[items]="areaSource$ | async"
valueProperty="Amount"
selectionMode="None">
</AreaSeries>
<RadCartesianChartGrid
tkCartesianGrid
horizontalLinesVisible="false"
verticalLinesVisible="false"
verticalStripLinesVisible="false"
horizontalStripLinesVisible="false"
horizontalStrokeColor="#181818">
</RadCartesianChartGrid>
<Palette tkCartesianPalette seriesName="Area">
<PaletteEntry
tkCartesianPaletteEntry
opacity="1"
[fillColor]="fillColor"
[strokeColor]="lineColor"
android:strokeWidth="4"
ios:strokeWidth="2">
</PaletteEntry>
<PaletteEntry
tkCartesianPaletteEntry
[fillColor]="fillColor"
strokeColor="#181818"
strokeWidth="0">
</PaletteEntry>
</Palette>
</RadCartesianChart>
</StackLayout>
Here's what I want it to look like (credit: photoshop).
You should be setting the horizontalZoom property, probably upping its current value by about 30%.
const screen = require("tns-core-modules/platform").screen;
let widthDIPs = screen.mainScreen.widthDIPs;
<StackLayout>
<RadCartesianChart
height="100%"
[width]="widthDIPs"
class="default-background">
<CategoricalAxis
(...)
src: https://docs.nativescript.org/angular/ui/styling#supported-measurement-units
I've got a Material UI Table.
I build it like this:
tableValues.map((curRow, row) => {
tableRows.push(
<TableRow key={this.state.key + "_row_" + row}>
{curRow.map((cellContent, col) => {
let adHocProps = {...this.props, type:"Text", label:"", value:cellContent}
return (
<TableCell className={classes.tableCell} key={this.props.key + "_row:" + row + "_col:" + col}>
{col===0 && this.props.rowHeaders ?
<div className={classes.header}>{cellContent}</div> :
<Question {...adHocProps} stateChangeHandler={this.handleTableChange("in build")} />}
</TableCell>
)})}
</TableRow>
);
return null;
});
return (
<Table key={this.props.key + "_table"} className={classes.table}>
<TableHead>
<TableRow>
{this.props.colHeaders.map((header) => <TableCell className={classes.tableCell} key={this.props.id + header}><div className={classes.header}>{header}</div></TableCell>)}
</TableRow>
</TableHead>
<TableBody>
{tableRows}
</TableBody>
</Table>
);
The Question is actually a glorified [TextField]2 created thusly:
<div>
<TextField
value={this.state.value}
onChange={this.handleTextChange(this.props.key)}
key={this.props.key}
id={this.props.id}
label={this.props.label}
placeholder={realPlaceholder}
className={classes.textField}
fullWidth
xmlvalue={this.props.XMLValue}
/>
</div>
... and then wrapped in Paper.
The styles are:
tableCell: {
padding: 5,
},
textField: {
padding: 0,
margin: 0,
backgroundColor: "#191",
}
This works, I get the appropriate content in each cell.... but the Question element is way wider than needed, and appear to have a min width and some padding I can't remove.
The table is full-width until you get to a certain point, then notice here:
that when the window is shrunk below a certain level, the table doesn't shrink any further. Acting as if the elements inside have a minimum width.
As a process of investigation, I change the Question element to simply return "Hi". When it does, the table then looks like this:
(which is to say, it condenses nicely... still too much padding on the tops and bottom and right, but WAY better)
So that leads me to believe the issue is with my Question component. I should note this happens on other Questions as well -- they all appear to have a min width when a width is not defined for them... UNLESS they are placed inside a container that has a designated width such as a Material UI Grid. For example, when placed in a `Grid and the window is shrunk, they shrink appropriately:
So why isn't the Table/TableCell also shrinking the TextField like the Grid does? (or: how do I remove the apparent "MinWidth" on my textFields?) Do Material UI TextFields have a minimum width if one isn't otherwise specified?
For what it's worth, I have tried specifying the column widths of the table -- with success when the table is wide, but it still doesn't solve the apparent minimum width issue.
I have also tried changing the Question component to <input type="text" name="fname" /> and still have the same problem. It's interesting that that the Question component is simply "hi" the problem disappears but that when it's an input, it shows up.
I have discovered that the native input fields default width is 20 characters: https://www.w3schools.com/tags/att_input_size.asp
The 'size' property is key here:
Specifies the width of an element, in characters. Default
value is 20
To set the width of the TextField, you must pass properties to the native input field.
If you wish to alter the properties applied to the native input, you
can do so as follows:
const inputProps = {
step: 300,
};
return <TextField id="time" type="time" inputProps={inputProps} />;
For my use case, the following modified the sizes of the TextFields to be 10 characters in size:
<TextField
value={this.state.value}
onChange={this.handleTextChange(this.props.key)}
key={this.props.key}
id={this.props.id}
label={this.props.label}
placeholder={realPlaceholder}
className={classes.textField}
fullWidth
xmlvalue={this.props.XMLValue}
inputProps={{
size: 10
}}
/>
Unfortunately, this is a bit squishy... it neither holds the input field at exactly size nor does it treat it like a minimum size.... There appears to be some heirarchy of sizing in play between GridItems, table Columns, free-flow flex areas, and the actual TextField elements... and I'm not well versed enough to know what always 'wins'.
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same
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.