I am new to XAML.
I have a Mainview with a Button.
This button must display a UserControl by binding the content, and in the same time, the button must disappear.
My first try :
<ContentControl Content="{Binding CurrentViewModel}"/>
<ContentControl>
<Button Command="{Binding TestCommand}">
<Grid >
<Image Source="....." />
<TextBlock Text="Text on the button"/>
</Grid>
</Button>
</ContentControl>
In this example, when I click on the button, my usercontrol is displayed but the button remains in the MainWindow which is normal.
Of course I can create a usercontrol with just the button and keep only <ContentControl Content="{Binding CurrentViewModel}"/> it will do the job, but is it possible to do it in XAML?
Something like "Display the button only if MainWindowViewModel is binded?"
Thanks.
Related
In WinUI3 it seems that you are unable to modify the duration of a tooltip (similar to how WPF allowed a duration change with the ToolTipService.ShowDuration).
As such, I'm attempting to replicate the behavior using a Popup control such that the Popup will remain visible as long as the mouse is hovered over an element (utilizing the element's OnPointerEntered / OnPointerExited events to modify the IsOpen property of the Popup).
This displays the Popup correctly, however in my case the Popup exists inside a Grid which is inside the ListView.ItemTemplate for a ListView. ala:
<ListView>
<DataTemplate>
<Grid>
<TextBlock/>
<Popup/>
</Grid>
</DataTemplate>
</ListView>
Thus the popup only overlays the <Grid>, but still gets clipped within the region of the DataTemplate.
I'd like to have the popup overlay the <ListView> itself instead - is there a way to specify which content the popup will overlay such that it will overlay the <ListView>?
Or even better - to have it overlay all elements of the Window (replicating the placement of a tooltip?)
Is there a way to change the parent content for a popup in WinUI3?
Sure, you could place Popup at same level as ListView in current page. And listen ListView item PointerEntered and PointerExited event then pass current item datacontext to popup control.
Xaml
<ListView
Margin="0,10,0,45"
ItemsSource="{x:Bind Items}"
Visibility="Visible">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Vertical"
PointerEntered="StackPanel_PointerEntered"
PointerExited="StackPanel_PointerExited">
<TextBlock x:Name="Id" Text="{Binding ID}" />
<TextBox
x:Name="FirstName"
GettingFocus="FirstName_GettingFocus"
Text="{Binding FirstName}" />
<TextBox x:Name="LastName" Text="{Binding LastName}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Popup
x:Name="PopupTip"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Bottom" />
</TransitionCollection>
</Popup.ChildTransitions>
<StackPanel
Width="150"
Height="80"
Background="LightGray"
CornerRadius="4">
<TextBlock
x:Name="InfoLabel"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding ID}" />
</StackPanel>
</Popup>
Code behind
private void StackPanel_PointerEntered(object sender, PointerRoutedEventArgs e)
{
var ItemDataContext = (sender as FrameworkElement).DataContext;
PopupTip.DataContext = ItemDataContext;
PopupTip.IsOpen = true;
}
private void StackPanel_PointerExited(object sender, PointerRoutedEventArgs e)
{
PopupTip.DataContext = null;
PopupTip.IsOpen = false;
}
I have a button with an Image inside it
<Button BorderThickness="0" Background="Black" Grid.Column="0" Width="400" >
<Image HorizontalAlignment="Right" Height="20" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Width="20" />
</Button>
I want the image to be on the right end of the button so gave HorizontalAlignment="Right". But the Image always comes in the middle of the button. How can I fix this?
In the default style of Button, there is a ContentPresenter control to display the content of Button, it uses HorizontalContentAlignment property to control the horizontal alignment of the control's content. The default value is Center. So if you want to put the image in the right of Button, you can change the HorizontalContentAlignment to Right.
<Button HorizontalContentAlignment="Right" BorderThickness="0" Background="Black" Grid.Column="0" Width="400" >
<Image Height="20" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Width="20" />
</Button>
I want to have something like shown in this screenshot here:
The Edit part should be in the bottom of the circle and should be tappable. How can I achieve this in UWP xaml?
You can just "draw over" a Button to the Ellipse in a layout control eg. in a Grid. Something like this:
<Grid Height="100" Width="100" Background="Aqua">
<Ellipse Fill="Red"/>
<Button Background="Aqua" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Content="Edit" Tapped="Button_Tapped"/>
</Grid>
I'm having trouble with removing the padding in the list of a ComboBox.
I filled the list with three buttons, and above the first button there is space and below the last button there is also space:
When closed
When opened
Another problem is that the list doesn't appear beneath the button, as you can see on the second picture.
This is the code (note there is no styling yet):
<ComboBox x:Name="importComboBox" Margin="25" HorizontalAlignment="Stretch">
<ComboBox.PlaceholderText>Placeholder</ComboBox.PlaceholderText>
<ComboBoxItem Padding="0" Margin="0">
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch">button 1</Button>
</ComboBoxItem>
<ComboBoxItem Padding="0" Margin="0">
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch">button 2</Button>
</ComboBoxItem>
<ComboBoxItem Padding="0" Margin="0">
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch">button 3</Button>
</ComboBoxItem>
</ComboBox>
How can I remove those spaces and can I alter the dropdown position?
As Peter said, to achieve this we can modify the template of ComboBox. To modify the template of ComboBox, we can select the "[importComboBox]" in "Document Outline" and right click, then select "Edit Template" → "Edit a Copy...".
To remove the padding in the list. Editor the margin property of ItemsPresenter. ItemsPresenter specifies where items are placed in a control.
<ItemsPresenter Margin="0,0,0,0" />
To make the list appear beneath the button, we can editor the Margin property of Border in Popup. It determines the location of Popup.
<Border x:Name="PopupBorder"
BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
HorizontalAlignment="Stretch"
Margin="0,32,0,0">
I'm quite new to XAML so I'm hoping this to be a very simple question.
My main window has a TabControl and on certain cases, I would like to call the Unload event on a certain Tab.
The MainView xaml looks like this:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Views="clr-namespace:NameSpace.Project1.Views" x:Class="NameSpace.Project1.Views.MainWindow"
Width="500" Height="500"
Title="Hello World">
<Grid>
<TabControl x:Name="MyTabs" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<TabItem Header="Live" Name="ChildView">
<Views:ChildView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</TabItem>
<TabItem Header="Playback" Name="OtherView">
<Views:OtherView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</TabItem>
</TabControl>
</Grid>
</Window>
QUESTION:
On Close of the Application, I'm getting an OnExit event on the App.xaml.cs code, and there I wanted to make sure the ChildView Tab calls its Unload event.
I tried to programmatically call MyTabs.SelectedItem or MyTabs.SelectedIndex or OtherTab.IsVisible = true but none fire up the Unload event of the ChildView.
If I click on the OtherView tab, that event fires.
How do I call it programmatically??
Any help is truly appreciated.