I have a DevExpress grid like this:
<dxg:GridControl ItemsSource="{Binding CarsData}"
AutoPopulateColumns="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<dxg:GridControl.View>
<dxg:TableView Style="{StaticResource DxTableViewStyle}"/>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn Header="Car Name" FieldName="CarName" ReadOnly="False" />
<dxg:GridColumn Header="Brand Name" FieldName="BrandName" ReadOnly="True"/>
</dxg:GridControl.Columns>
</dxg:GridControl>
This grid is embeded into another container with a Fixed Width.
I would like to do something simpel but can't find how to do this, i.e.:
Have the columns autofit their content and headers.
If the columns get wider than the container of the grid, display a horizontal scroll bar
For some columns, set a max width.
Here is my style that I can't get working like I want:
<Style TargetType="dxg:TableView" x:Key="DxTableViewStyle">
<Setter Property="AllowBestFit" Value="True"/>
<Setter Property="BestFitArea" Value="All"/>
<Setter Property="BestFitMode" Value="VisibleRows"/>
<Setter Property="AutoWidth" Value="False"/>
<Setter Property="HorizontalScrollbarVisibility" Value="Auto"/>
</Style>
Thank you for your help!
Like #Sebi said in his comment, you should call the BestFitColumns on the GridView. I used to do it but now I avoid using it because it slows soooo much the loading of the grid, especially if you have an important set of data to show (it iterates through all the rows to find the best width for each column).
I recommend you to manually set the width of each column (the user can adjust the visible width if he wants to).
EDIT : Of course, if the total width of the GridView is larger than the GridControl's width, an horizontal scroll-bar will be automatically set to the veiw.
Related
I understand how to create a ToolbarItem and set it's Order equal to Secondary which will give me an overflow menu like so:
But I'm not sure how I could implement such a menu in other parts of my application. For instance in the app I'm currently working on, I've removed the toolbar and created my own meaning there is no way to set the ToolbarItems property. I can add a ImageButton for the 3 dots overflow menu icon but I cannot get it to display a menu like the out of the box implementation does.
I'd also like to use this in other parts of my app (not just on the toolbar) such as on some sort of CardView.
Has anyone dealt with this problem before?
You can use Absolute layout to achieve this:
<AbsoluteLayout>
<StackLayout RowSpacing="0" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<!--Main Content of the screen-->
</StackLayout>
<BoxView Color="Gray" AbsoluteLayout.LayoutBounds="1,0,250,250" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
In the above code I have used a BoxView of Gray background for that menu toolbar to just show a demo, you can implement your view and set the width and height accordingly and make that view visible on click of icon which you will add on the toolbar.
Output:
This can be easily achieved using AbsoluteLayout in Xamarin.Forms
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout
https://xamgirl.com/absolutelayout-in-xamarin-made-simple/
I have four rows and two columns.I need to display the background image to full grid.Please provide me solution.I had referred this creating background image in content page link:Xamarin Forms - how to add background image to a content page
.But how to set background image to grid layout.
Just add the Image to the first row and column, set ColumnSpan and RowSpan to cover your entire grid and set the Aspect to AdjustFit.
Then you add the other items you want to add to the grid.
A grid cell can hold more than just one element, however keep in mind that the last item in a cell will end up on top of the items having been added earlier.
For example:
<Grid>
<Image>
<Button>
</Grid>
The button is the last item in the order, so it will become the topmost item and be clickable. If you had the button first and the image last, the image would cover the button, which therefore would not be clickable.
You will have to do some AbsoluteLayout trickery here:
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" AbsoluteLayout.LayoutFlags="All" InputTransparent="true" Source="Your_Image" Aspect="AspectFill" />
<!--Your Grid Here-->
<Grid AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" />
<AbsoluteLayout>
See to it that you place the image first in absolute layout so that it goes in the back,
and set its input transparent so it does not take any click events.
i have a issues with default margin of a button on xamarin forms. i need to take off the margin. some thought how i can make this ?? i need to use custom renderer?
I really need this to join two elements without leaving space, a label and a button.
i already try with
<Button
BackgroundColor="Fuchsia"
BorderRadius="0"
BorderWidth="0"
Text="Test"
HeightRequest="50"
WidthRequest="60"
TextColor="#333333"
x:Name="btnBack"
Margin="0"
VerticalOptions="Start"
HorizontalOptions="Start" />
but this not work for me, nothing happened.
other guys says that making a custom renderer maybe will work.
What are you using to lay out the label and the button? If StackLayout you may need to set the StackLayout Spacing property to 0 to remove the gap between the label and the button. If Grid look at RowSpacing and ColumnSpacing properties.
If you want to change margins dynamically, you would write something like this in C#
button.margin = new thickness(0,0,0,0);
This would make the margins of the button 0.
You would potentially do this for all elements with a thickness to change that issue.
Suppose I have a (Spark) label. What is the best way to find the length of the text in it? I looked at the myLable.measureText("bla bla") method but it says:
To measure text in Spark components, get the measurements of a spark.components.Label or spark.components.RichText
After looking around I cannot find what this is refering to. I tried myLabel.measureWidth() but this does not return anything usefull (it frequently returns zero).
Note: I am explicitly setting the width like this:
<s:Lable width="{globalWidthVariable"} .../>
If the text overflows I would like to increse the globalWidthVariable to the size of the text.
Using the width attribute will work as long as you never set the width attribute. (Setting the width attribute turns off auto sizing.) To avoid setting the width attribute I: read from the width addribute and placed a buffer beside the text box like this:
<hbox>
<label id="myLable" ... />
<spacer width="{globalWidthVariable - myLabel.width}" />
</hbox>
The spacer cannot make the label smaller than globalWidthVariable but it can expand it (only functionality I require).
I'm getting some performance issues with this code, where mousing over the canvas area is laggy if i leave in the canvases within the data template, but no lag if I take them out (but obviously the Canvas.Left bindings don't work so the ellipses are in the wrong place!) Is there a way to position these items without each one needing its own canvas?
<Canvas>
<ItemsControl ItemsSource="{Binding Path=SpatialData.TrainEvents.ArrDepEllipseOfLines}" Name="ctrlChartTrainEventsArrDep" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Ellipse Width="{Binding EventShape.Width}" Height="{Binding EventShape.Height}" Stroke="{Binding Path=Stroke}" StrokeThickness="{Binding StrokeThickness}" Fill="{Binding Path=Fill}" Canvas.Left="{Binding CanvasPlacement.X}" Canvas.Top="{Binding CanvasPlacement.Y}" />
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
Thanks very much,
Becky
Yes, you can remove the canvas in your ellipse. I think you'll find that your values for CanvasPlacement.X don't increment properly per ellipse and the effect your seeing is the fact that each element in your ItemsControl is actually placed in a StackPanel (the default behaviour and can be changed via the ItemsPanel property) which is then laying these out for you - most likely in a horizontal line.