In my UWP xaml file, I need to reuse the StackPanel like below in the below ScrollViewer code, how to do it?
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
...
<ScrollViewer
Width="1920"
Height="1020"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
...
</StackPanel>
</ScrollViewer>
Create a UserControl and define the StackPanel there:
<UserControl
x:Class="App1.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
</UserControl>
You can then create several instances of your UserControl in your ScrollViewer:
<ScrollViewer
Width="1920"
Height="1020"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<local:MyUserControl1 />
<local:MyUserControl1 />
<local:MyUserControl1 />
</StackPanel>
</ScrollViewer>
Related
I'm back with another problem in my browser that I'm working on. I made a custom title bar where the Tabs come into the title bar to create a more immersive experience. but all that "Immersive experience" is being ruined by this seemingly unfixable bug. what ive tried to do is change the background of the CustomDragRegion Element.
look at the title bar. its disgusting. someone help me. plss
heres the code:
<Window
x:Class="Microsoft_Edge_WebView2_Runtime_Application.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Microsoft_Edge_WebView2_Runtime_Application"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<Grid BorderBrush="Transparent" x:Name="Browser" Margin="0,0,0,0" Background="{ThemeResource SystemControlBackgroundAccentRevealBorderBrush}">
<TabView Margin="0, 0, 0, 0" x:Name="Tabv" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested">
<TabViewItem FontFamily="Gellix" x:Name="HomeTab" Header="Home" IsClosable="False">
<TabViewItem.IconSource>
<SymbolIconSource Symbol="Document" />
</TabViewItem.IconSource>
<Grid x:Name="TabContent" Margin="0,0,0,0" Background="#282828">
<WebView2 x:Name="WebView" Source="https://google.com" Margin="0,52,0,0"/>
<Grid Margin="0,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="666">
<TextBox KeyDown="AddressBar_KeyDown" FontFamily="Gellix" x:Name="AddressBar" HorizontalAlignment="Center" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" Width="576" PlaceholderText="Search or type a URL here..." TextAlignment="Center" />
<Button Height="32" Width="40" x:Name="Home" Click="Button_Click_1">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
<Button Height="32" Width="40" x:Name="Go" Margin="626,0,0,0" Click="Button_Click">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
</Grid>
<Button x:Name="Refresh" Margin="0,10,10,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Button_Click" HorizontalAlignment="Right">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
<Button x:Name="Backward" Margin="10,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Backward_Click">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
<Button x:Name="Forward" Margin="53,10,0,0" VerticalAlignment="Top" Height="32" Width="40" FontFamily="Segoe UI Symbol" Click="Forward_Click">
<FontIcon FontFamily="Segoe Fluent Icons" Glyph="" Margin="-2,-1,-2,-1"/>
</Button>
</Grid>
</TabViewItem>
<TabView.TabStripFooter>
<Grid Margin="0,0,0,0" x:Name="CustomDragRegion" Background="Transparent"/>
</TabView.TabStripFooter>
</TabView>
</Grid>
if you really need c# code then just comment. cuz I have only two lines of c# related to the title bar.
In my case, I was able set the tittle bar to the color defined in the xaml by setting the WindowCaptionsBackground and WindowCaptionsBackgroundDisabled properties to Transparent, as such:
App.xaml
<Application
...
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<SolidColorBrush x:Key="WindowCaptionBackground">Transparent</SolidColorBrush>
<SolidColorBrush x:Key="WindowCaptionBackgroundDisabled">Transparent</SolidColorBrush>
</ResourceDictionary>
</Application.Resources>
</Application>
More info on customizing the tittle bar: https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3
I have a TreeView that is using a single HierarchicalDataTemplate. I know how to bind to a property of the parent TreeViewItem in a HierarchicalDataTemplate:
<Button
Command="{Binding DataContext.RemoveCommand,
RelativeSource={RelativeSource AncestorLevel=2,
AncestorType=TreeViewItem}}"
CommandParameter="{Binding ElementId}" />
However, this does of course not work for the top-most items, since there is no ancestor TreeViewItem - here, I want to use the DataContext of the TreeView itself. How can I bind the command to the TreeView's DataContext for the top-most elements of the tree view? If necessary, you can assume that the view model has a property of the same name as the hierarchical view models representing each tree item.
This is my modified MainWindow.xaml based on the SubModelCollection example of Elmish.WPF (repo on GitHub), that demonstrates how I thought I solved the problem. As I mentioned in the comment to the OP, I encountered a new problem with this solution, but I hope it can be ironed out without too much effort. I have a feeling it's a trivial problem that remains.
My intention here is that one HierarchicalDataTemplate will be used for the top level items, and another for all other items. To my surprise it looks like it actually works as far as manipulating the data correctly, and the buttons work on all levels, but WPF is not happy with what's going on. Nodes on level two collapses visually when I add, remove or move subnodes below them, and the Output pane in VS has something to tell:
"System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'TreeViewItem' (Name=''); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
"
I had the same kind of error before introducing SharedPart, so I don't think that's causing it.
This is MainWindow.xaml, the only file I modified.
<Window
x:Class="Elmish.WPF.Samples.SubModelCollection.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Single counter" Height="800" Width="1000"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<DataTemplate x:Key="SharedPart">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CounterId}" Width="250" Margin="10,5,10,5" />
<TextBlock Text="{Binding CounterValue, StringFormat='Counter value: {0}'}" Width="100" Margin="0,5,10,5" />
<Button Command="{Binding Decrement}" Content="-" Margin="0,5,10,5" Width="30" />
<Button Command="{Binding Increment}" Content="+" Margin="0,5,10,5" Width="30" />
<Button Command="{Binding Reset}" Content="Reset" Margin="0,5,10,5" Width="50" />
<TextBlock Text="{Binding StepSize, StringFormat='Step size: {0}'}" Margin="0,5,10,5" />
<Slider Value="{Binding StepSize}" TickFrequency="1" Maximum="10" Minimum="1" IsSnapToTickEnabled="True" Width="100" Margin="0,5,10,5" />
<Button Command="{Binding AddChild}" Content="Add child" Margin="0,5,10,5" />
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate x:Key="Level2Data" ItemsSource="{Binding Path=ChildCounters}">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource SharedPart}"/>
<Button
Command="{Binding DataContext.Remove, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}, AncestorLevel=2}}"
CommandParameter="{Binding CounterId}"
Content="×" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveUp, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}, AncestorLevel=2}}"
CommandParameter="{Binding CounterId}"
Content="↑" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveDown, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}, AncestorLevel=2}}"
CommandParameter="{Binding CounterId}"
Content="↓" Margin="0,5,10,5" Width="20"/>
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="Level1Data" ItemsSource="{Binding Path=ChildCounters}" ItemTemplate="{StaticResource Level2Data}">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource SharedPart}"/>
<Button
Command="{Binding DataContext.Remove, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding CounterId}"
Content="×" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveUp, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding CounterId}"
Content="↑" Margin="0,5,10,5" Width="20" />
<Button
Command="{Binding DataContext.MoveDown, RelativeSource={RelativeSource FindAncestor, AncestorType=TreeView}}"
CommandParameter="{Binding CounterId}"
Content="↓" Margin="0,5,10,5" Width="20"/>
</StackPanel>
</HierarchicalDataTemplate>
</Window.Resources>
<StackPanel Margin="0,20,0,10">
<Button Command="{Binding AddCounter}" Content="Add counter" Width="150" Margin="0,0,0,20" />
<TreeView ItemsSource="{Binding Counters}" ItemTemplate="{StaticResource Level1Data}">
</TreeView>
</StackPanel>
I'm trying to add Buttons to my Scrollviewer, my result so far is negative, scrollviewer will not work. I tried wrapping around stackpanels but no luck. Can anyone guide me in the right direction? Thanks,
<ScrollViewer Name="flippy" Grid.Row="1" >
<Grid Width="Auto" Height="Auto" MinWidth="1366" MinHeight="668" Name="GridA" Grid.Row="1">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.png" Stretch="None" />
<StackPanel Height="150" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal">
<Button Content="button1" HorizontalAlignment="Left" VerticalAlignment="Center" Height="180" Width="179" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/storA.png"></ImageBrush>
</Button.Background>
</Button>
<Button Content="button2" HorizontalAlignment="Right" VerticalAlignment="Center" Height="140" Width="121" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/litenA.png"/>
</Button.Background>
</Button>
</StackPanel>
<StackPanel Height="103" Width="557" VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal">
<Button Content="button3" HorizontalAlignment="Center" VerticalAlignment="Center" Height="103" Width="553">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png"/>
</Button.Background>
</Button>
<Image Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png" />
</StackPanel>
</Grid>
</ScrollViewer>
I have a StackPanel that holds buttons, and I have added a ContextMenu so that each item may be pinned to the start screen by selecting that MenuItem. How might I determine on the Tap event which button has been selected?
MainPage.xaml
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Button x:Name="Tile1" Height="173" Width="173" Margin="12,0,0,0" Click="1_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/1.png"/>
</Button.Content>
</Button>
<Button x:Name="Tile2" Height="173" Width="173" Margin="12,0,0,0" Click="2_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/2.png"/>
</Button.Content>
</Button>
<Button x:Name="Tile3" Height="173" Width="173" Margin="12,0,0,0" Click="3_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/3.png"/>
</Button.Content>
</Button>
</StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
Edit**
Place the ContextMenu individually for each button.
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Button x:Name="Tile1" Height="173" Width="173" Margin="12,0,0,0" Click="1_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/1.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
<Button x:Name="Tile2" Height="173" Width="173" Margin="12,0,0,0" Click="2_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/2.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
<Button x:Name="Tile3" Height="173" Width="173" Margin="12,0,0,0" Click="3_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/3.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
</StackPanel>
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
var menuItem = (MenuItem) sender;
var ctxMenu = (ContextMenu) menuItem.Parent;
var tileButton = (Button) ctxMenu.Owner;
}
My question is just like that. How should I show the CustomDialog control from Callisto toolkit? I have the following xaml:
<controls:LayoutAwarePage
x:Name="pageRoot"
x:Class="HeronClientWindowsStore.Views.SuggestEventDialogPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HeronClientWindowsStore.Views"
xmlns:controls="using:HeronClientWindowsStore.Controls"
xmlns:callisto="using:Callisto.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
</Page.Resources>
<callisto:CustomDialog
x:FieldModifier="public"
x:Name="suggestEventDialog"
Width="300" Height="500"
Title="Suggest an Event"
Background="Teal"
BackButtonVisibility="Visible">
<StackPanel>
<TextBlock
Margin="0,0,0,8"
Text="Suggest an event that should be added to Heron."
FontSize="14.6667"
FontWeight="SemiLight"
TextWrapping="Wrap" />
<TextBlock
Margin="0,0,0,8"
FontSize="14.6667"
FontWeight="SemiLight"
Text="Event URL" />
<callisto:WatermarkTextBox
HorizontalAlignment="Left"
Watermark="http://www.example.com"
Width="400"
Height="35" />
<StackPanel
Margin="0,20,0,0"
HorizontalAlignment="Right"
Orientation="Horizontal">
<Button Content="OK" Width="90" Margin="0,0,20,0" />
<Button Content="CANCEL" Width="90" />
</StackPanel>
</StackPanel>
</callisto:CustomDialog>
It doesn't show and I can't see any Method for triggering it.
You have to use IsOpen property to open the dialog.
I am pasting here the working code for me.
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Show Dialog" Click="btnShowDialog_Click" />
<callisto:CustomDialog
x:FieldModifier="public"
x:Name="suggestEventDialog"
Title="Suggest an Event"
Background="Teal"
BackButtonVisibility="Visible"
BackButtonClicked="suggestEventDialog_BackButtonClicked_1">
<StackPanel>
<TextBlock
Margin="0,0,0,8"
Text="Suggest an event that should be added to Heron."
FontSize="14.6667"
FontWeight="SemiLight"
TextWrapping="Wrap" />
<TextBlock
Margin="0,0,0,8"
FontSize="14.6667"
FontWeight="SemiLight"
Text="Event URL" />
<callisto:WatermarkTextBox
HorizontalAlignment="Left"
Watermark="http://www.example.com"
Width="400"
Height="35" />
<StackPanel
Margin="0,20,0,0"
HorizontalAlignment="Right"
Orientation="Horizontal">
<Button Content="OK" Width="90" Margin="0,0,20,0" />
<Button Content="CANCEL" Width="90" />
</StackPanel>
</StackPanel>
</callisto:CustomDialog>
</Grid>
C#
private void btnShowDialog_Click(object sender, RoutedEventArgs e)
{
suggestEventDialog.IsOpen = true;
}
private void suggestEventDialog_BackButtonClicked_1(object sender, RoutedEventArgs e)
{
suggestEventDialog.IsOpen = false;
}