The idea here is simple, I've got 2 or more buttons and want to have them act like Radio Buttons. So only one can be checked at any time, and when one is checked the others must uncheck themselves. I'm using MVVM so don't want to go down the route of code behind although it would have been easier for this.
Here is the XAML I've tried which locks up due to the buttons referencing each other.
<Label Text="Group Header Sorting" TextColor="{DynamicResource InverseTextColor}"/>
<StackLayout Orientation="Horizontal" Spacing="0">
<buttons:SfButton x:Name="GroupHeaderSortAscButton" Text="Ascending" HeightRequest="35" WidthRequest="90" IsChecked="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked, Converter={converters:InverseBoolConverter}}">
</buttons:SfButton>
<buttons:SfButton x:Name="GroupHeaderSortDescButton" Text="Descending" HeightRequest="35" WidthRequest="90" IsChecked="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked, Converter={converters:InverseBoolConverter}}">
</buttons:SfButton>
</StackLayout>
I've also tried Data Triggers with more success but its still not perfect as it requires the unselected button pressed twice before it starts work.
<StackLayout Orientation="Horizontal" Spacing="0">
<buttons:SfButton x:Name="GroupHeaderSortAscButton" Text="Ascending" HeightRequest="35" WidthRequest="90" IsChecked="False">
<buttons:SfButton.Triggers>
<DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked}" Value="True">
<Setter Property="IsChecked" Value="False"/>
</DataTrigger>
<DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked}" Value="False">
<Setter Property="IsChecked" Value="True"/>
</DataTrigger>
</buttons:SfButton.Triggers>
</buttons:SfButton>
<buttons:SfButton x:Name="GroupHeaderSortDescButton" Text="Descending" HeightRequest="35" WidthRequest="90" IsChecked="True">
<buttons:SfButton.Triggers>
<DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked}" Value="True">
<Setter Property="IsChecked" Value="False"/>
</DataTrigger>
<DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked}" Value="False">
<Setter Property="IsChecked" Value="True"/>
</DataTrigger>
</buttons:SfButton.Triggers>
</buttons:SfButton>
</StackLayout>
I'm aware that from XF 4.6 they introduced the RadioButton control, I've tried this and its buggy and according to comments on Git Hub it will have major changes in XF 5, so I don't want to implement this experimental version.
This is the look I'm after:
We have achieved your requirement by using Syncfusion SfButton. To make it as toggle type, need to set the IsCheckable property as True. Then only it will update the IsChecked property properly. To maintain the single selection, we have extended the SfButton by including the GroupKey internal with further validation.
CustomRadioButton
I wanted to be able to do this using standard buttons and XAML and avoid 3rd party controls, nothing more nothing less.
I ended up using Syncfusion's SfSegmentedControl which works rather well, but this is a paid for, 3rd party control.
Related
I would like to build a validation text box, which would be a normal UWP TextBox wrapped within a StackPanel, which also contains a TextBlock. The intent is that a validation message can be shown beneath the text box when there is a validation error.
I know I can do this by creating a custom control, but this would require me to implement all the properties I need and create a bunch of dependency properties, etc.
I'm hoping there is an easier way, where I can just completely derive the text box, but override the display template for it and include a label beneath it.
You can get most of the way there in XAML using the built-in IDataErrorInfo-based validation machinery and defining a control template for the TextBox's Validation.ErrorTemplate. There's a pretty good article at this link:
The XAML from the article at the link above follows, also check out this discussion on WPF's built-in validation here.
<Style TargetType="{x:Type Label}">
<Setter Property="Margin" Value="5,0,5,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,2,40,2" />
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<Border Background="OrangeRed" DockPanel.Dock="right" Margin="5,0,0,0"
Width="20" Height="20" CornerRadius="5"
ToolTip="{Binding ElementName=customAdorner,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center"
FontWeight="Bold" Foreground="white" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My DashBoardSimpleCountObject has 2 values: MyName and MyValue.
I use an ObservableCollection<DashboardSimpleCountObject> called MyData.
I want to show a picture, as long as MyValue is null.
However, the picture ("loading") is only shown at the last item of my ObservableCollection (no matter, how many items are in there). As soon as a MyValue is set (with anything other than null), it is automatically updated and shown correctly - that works fine at all items.
<ItemsControl x:Name="_control" ItemsSource="{Binding MyData}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="25">
<Label FontSize="14" Content="{Binding MyName}" />
<Label Margin="0,25" HorizontalContentAlignment="Right" FontSize="29" FontWeight="ExtraBold" Foreground="{Binding MyColor}">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Content" Value="{Binding MyValue}" />
<Style.Triggers>
<DataTrigger Binding="{Binding MyValue}" Value="{x:Null}">
<Setter Property="Content">
<Setter.Value>
<Image Width="32" Height="32" Source="{DynamicResource loading}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
What am I doing wrong?
Thank you very much in advance! :)
It seems, the nature of DynamicResource causes this issue.
Simply changing DynamicResource to StaticResource did the trick.
So, the DataTrigger worked just fine from the beginning. The image simply did only show up once due to being loaded as a DynamicResource.
I have a ListView composed of custom ViewCell in xaml. Simplified version below:
<ListView x:Name="myList" ItemTapped="myItemTapped" ItemsSource="{Binding myList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Quantity" TextColor="White"/>
<Entry x:Name="QuantityEntry" BackgroundColor="White"/>
<StackLayout.Triggers>
<DataTrigger TargetType="StackLayout" Binding="{Binding IsActive}" Value="True">
<Setter Property="IsVisible" Value="True"/>
</DataTrigger>
</StackLayout.Triggers>
</StackLayout>
<StackLayout.Triggers>
<DataTrigger TargetType="StackLayout" Binding="{Binding IsActive}" Value="True">
<Setter Property="BackgroundColor" Value="Gray"/>
</DataTrigger>
</StackLayout.Triggers>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
IsActive is the property of the list Item that triggers the css change. myItemTapped() is a function that sets the item tapped IsActive = true.
Sporadically with no identifiable pattern, sometimes one or two items in the list will not show the Entry text box BUT its background css is changed to gray and its property IsActive is true. It also doesnt always happen, sometimes they all work as they should.
tldr; Expected: On tap of list item, background = gray & text box appears & x icon is shown
Actual: sporadically, sometimes only the background = gray & no text box & no x icon
Any Ideas?
I'm trying to have a MenuFlyout on every item of a ListView. This work's so far without a problem in the way i want it to. But there's one thing that never get solved no matter how much i try. No matter what property i set, the MenuFlyout always clamps to the right side of the screen. i've checked every link with documentation and questions in regards of Windows Phone 8.1 applications using this but without luck. Here's some of the code.
<StackPanel>
<AppBarButton Icon="More"
ClickMode="Release"
Foreground="Black"
IsDoubleTapEnabled="False"
IsHoldingEnabled="False"
RenderTransformOrigin="0.5,0.5"
VerticalAlignment="Top"
HorizontalAlignment="Right">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyout.MenuFlyoutPresenterStyle>
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="25,0,25,25"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
</MenuFlyout.MenuFlyoutPresenterStyle>
<ToggleMenuFlyoutItem Text="Copy" HorizontalAlignment="Left" />
<ToggleMenuFlyoutItem Text="Delete" HorizontalAlignment="Left" />
</MenuFlyout>
</AppBarButton.Flyout>
<AppBarButton.RenderTransform>
<CompositeTransform Rotation="90" TranslateX="0" TranslateY="0"/>
</AppBarButton.RenderTransform>
</AppBarButton>
</StackPanel>
My project is WPF (Windows Presentation foundation) with the 4.5 framework using Visual Studio 2012.
I have a UserControl in my window which I'd like to animate(move) automatically after input has been entered into a textbox.
Here is the usercontrol...
<nbcuc:Search x:Name="search" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<nbcuc:Search.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</nbcuc:Search.RenderTransform>
<nbcuc:Search.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding SearchAnimationState, UpdateSourceTrigger=PropertyChanged}" Value="New">
<Setter Property="nbcuc:Search.HorizontalAlignment" Value="Left"/>
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource StoryboardSearch}" />
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</nbcuc:Search.Style>
</nbcuc:Search>
I know the Storyboard animation works because I had it working on the Window.Load event trigger. I want a property to be set to something and then fire the trigger. I know the property it working because I set the value to a textbox in my window.
I'm rather new to wpf and xaml so this really makes little sense to me why it would not work.
Thanks