I am working on ECommerce Universal app in Windows 10. I have DatePicker control to manage filter for Between Dates.
It is working fine in Desktop State(View) (>720). But width of DatePicker doesn't reduce in Tablet State(View) (<720).
I have set Setter for it:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PageSizeStatesGroup"
CurrentStateChanged="OnCurrentStateChanged">
<VisualState x:Name="MediumState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--Set width to 215 but it doesn't reduce-->
<Setter Target="datepicker1.Width" Value="215"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Generally, this works for other control in my application whether it is for Desktop view or Tablet view or Mobile view. But it doesn't work for DatePicker.
Can anybody suggest me how to achieve this?
DatePicker has also set MinWidth property as default, so you have to join the setter for this property too. Otherwise it takes MinWidth value, when your Width value is smaller.
It should be something like this:
<Setter Target="datePicker1.MinWidth" Value="215" />
Related
In my .NET MAUI app, I'm implementing chat feature and want to make sure that the Editor and Button are perfectly located at the bottom of the screen.
I created a Grid for the controls to produce this layout
The problem I'm having is with the Editor width because if I get it to look right on Android, it's not perfect on iOS and vice versa.
Here's how I approached it:
<Grid
RowDefinitions="50"
ColumnDefinitions="*,50"
RowSpacing="0"
ColumnSpacing="5"
HorizontalOptions="StartAndExpand"
Margin="5,5,5,5">
<Editor
Grid.Column="0" />
<Button
Grid.Column="1" />
</Grid>
Other than entering some arbitrary number for WidthRequest for the Editor, how do I set the width for it so that it always takes up all the available space and look like it in the picture?
After setting HorizontalOptions="FillAndExpand" as Jason suggested like below, it looks right on Android and iOS.
<Grid
RowDefinitions="50"
ColumnDefinitions="*,50"
RowSpacing="0"
ColumnSpacing="5"
HorizontalOptions="FillAndExpand"
Margin="5">
<Editor
Grid.Column="0" />
<Button
Grid.Column="1" />
</Grid>
As the name suggests, I'm trying to create an on/off type button using XAML and PowerShell, but cannot for the life of me find any guides or code on the internet.
I found a page with a great demo. Link here.
This is how the code begins.
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Border x:Name="Border" CornerRadius="10"
When using XAML for PowerShell we can't utilise x: at all.
Here's another more indepth answer right here on StackOverflow. Same issue. There doesn't seem to be any resources for doing this without the dreaded x:
Anyone any ideas?
U need to copy the style under here:
<Window.Resources>
<Style Key=“MyToggleStyle“ TargetType="ToggleButton">
Then u can use it on your button like this:
<ToggleButton Style="{StaticResource MyToggleStyle}" />
U can simply drop the x:
Name="Border"
TargetType="ToggleButton"
Came across this strange behavior in .NET MAUI app while testing it on an iOS device.
First, everything looks fine on Android -- both emaulator and physical device. I then noticed this issue in iOS Simulator and have the same results on my iPhone.
If I have no RefreshView around my CollectionView, the empty view message display where it's supposed -- well almost because I can never place it in the center of the page vertically but other than that, it displays correctly -- see below:
If I do place my CollectionView within a RefreshView, the Label gets pushed to the right -- see below:
Here's the actual code with the RefreshView. All you need to do is remove RefreshView and label is displayed in the center.
<RefreshView
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCouponsCommand}">
<CollectionView
x:Name="MyCouponsList"
ItemsSource="{Binding Feed}"
BackgroundColor="Transparent"
VerticalOptions="StartAndExpand"
Margin="0,5,0,0">
<CollectionView.EmptyView>
<VerticalStackLayout
VerticalOptions="CenterAndExpand">
<Label
Text="No data..."
TextColor="{StaticResource Gray600}"
HorizontalTextAlignment="Center" />
</VerticalStackLayout>
</CollectionView.EmptyView>
</CollectionView>
</RefreshView>
Any idea what could be causing this?
try replacing
<CollectionView
x:Name="MyCouponsList"
ItemsSource="{Binding Feed}"
BackgroundColor="Transparent"
VerticalOptions="StartAndExpand"
Margin="0,5,0,0">
<CollectionView.EmptyView>
<VerticalStackLayout
VerticalOptions="CenterAndExpand">
<Label
Text="No data..."
TextColor="{StaticResource Gray600}"
HorizontalTextAlignment="Center" />
</VerticalStackLayout>
</CollectionView.EmptyView>
</CollectionView>
with
<CollectionView
x:Name="MyCouponsList"
ItemsSource="{Binding Feed}"
BackgroundColor="Transparent"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Margin="0,5,0,0"
EmptyView="No Data..."/>
</CollectionView>
I have the following design concept for a Windows Store App, but I'm stuck at the best way to implement this:
The red rectangle indicates the view of the page on an actual device. The page consist of a header Grid on the left, and a GridView on the right. What I want to achieve is, when the user performs a swipe gesture, instead of scrolling on the GridView, I hope that the entire page is scrolled, just like this:
I have managed to achieve this by using the following method:
<ScrollViewer HorizontalScrollMode="Enabled">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="600" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftHeaderPanel" />
<GridView Grid.Column="1" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled" />
</Grid>
</ScrollViewer>
However, for some reason unknown to me, the GridViewItems within the GridView are displayed like a StackPanel after I set it this way, which means that the items no longer stack horizontally -- instead they now stacked vertically.
I have also discovered that by setting the Height attribute on the GridView control will solve the problem, but I'm trying to avoid the need to explicitly specify the height of my control. Is there any way out? Thanks!
Try this : below code works for me
Use HorizontalScrollBarVisibility and VerticalScrollBarVisibility instead of HorizontalScrollMode VerticalScrollMode
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="600" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftHeaderPanel" />
<GridView Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
</Grid>
</ScrollViewer>
After closing a Popup a strange border appears one of a Page element. (Page is parent of a Popup)
Do you know the reason? Or maybe know the name of property that trigger this border?
The back button has Focus. That is the Focused state. It's part of the standard Windows Store XAML template. It's contained in the StandardStyles.xaml file.
<Style x:Key="BackButtonStyle" TargetType="Button">
Some of the key pieces (this would be for the dark theme for example):
<Rectangle
x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5"/>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<!-- ... etc... -->
</VisualStateGroup>
While you could disable it or remove it, you might want to just move focus somewhere else when the popup closes, as it's a visual indicator for keyboard/assistive-control users that the back button has focus. You should be able to press the TAB key a few times to cause it to show without using the popup.