I'm using ItemsRepeater. And using a ScrollViewer to scroll left/right.
For some reason, I have to disable ScrollViewer' HorizontalScrollMode, and add Left/Right Button to manual scroll.
The xaml is
<Grid>
<muxc:ItemsRepeaterScrollHost Margin="12" Loaded="ItemsRepeaterScrollHost_Loaded">
<ScrollViewer
x:Name="sss"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
HorizontalScrollMode="Disabled">
<muxc:ItemsRepeater
x:Name="HorizontalRepeater"
ItemsSource="{x:Bind product}"
ItemTemplate="{StaticResource HorizontalTemplate}">
<muxc:ItemsRepeater.Layout>
<muxc:StackLayout Orientation="Horizontal" Spacing="12"/>
</muxc:ItemsRepeater.Layout>
</muxc:ItemsRepeater>
</ScrollViewer>
</muxc:ItemsRepeaterScrollHost>
<Button
x:Name="ButtonLeft"
Tapped="ButtonLeft_Tapped">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="18" />
</Button>
<Button x:Name="ButtonRight"
Tapped="ButtonRight_Tapped">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="18" />
</Button>
</Grid>
Then I use
sss.ChangeView(step, null, null);
Nothing happens.
Why, thx.
How to manually scroll using ItemsRepeater
For my testing, ChangeView can't works for ItemsRepeater, Please try replace it with ScrollToHorizontalOffset or ScrollToVerticalOffset method.
Update
After update OS to latest version (1909) ChangeView works well, It may be a issue within previous version.
Related
we have a ComboBox and a Button next to eachother. They are in the same Grid.Rowin two different Grid.Columns.
However they both appeared to have a different size. Even by setting VerticalAlignment="Stretch" this did not change.
Last but not least I set an fixed height to both elements but they are still not the same size.
How dows that come and how can I change it?
Here is an image of the problem
This works on my sample app.
<Grid RowDefinitions="Auto,Auto">
<TextBlock Text="Test" Grid.Row="0" />
<Grid
Grid.Row="1"
ColumnDefinitions="Auto,Auto"
RowDefinitions="Auto,Auto">
<ComboBox
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Stretch"
CornerRadius="0"
SelectedIndex="0">
<TextBlock Text="Auswahlen" />
</ComboBox>
<Button
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Stretch"
CornerRadius="0">
<FontIcon
FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Button>
</Grid>
</Grid>
I have a pivot most used in the desktop and I want the arrows in the pivots to be fixed and not just to appear on hover and also to make the arrows larger(double) as they can be easily clicked.
I tried to find the parameter in the style component but unfortunately didn't have much luck there.
This is the default style for the Pivot element. https://msdn.microsoft.com/en-in/library/windows/apps/mt299144.aspx . Please update your required attribute to achieve the same. I updated height of the left and right navigation buttons(PreviousButton & NextButton) and thus it is reflecting in the UI
Here is the specific portion changes did in the default template:
<Button
x:Name="PreviousButton"
Grid.Column="1"
Template="{StaticResource PreviousTemplate}"
Width="20"
Height="72"
UseSystemFocusVisuals="False"
Margin="{ThemeResource PivotNavButtonMargin}"
IsTabStop="False"
IsEnabled="True"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Opacity="1"
Background="Transparent" />
<Button
x:Name="NextButton"
Grid.Column="1"
Template="{StaticResource NextTemplate}"
Width="20"
Height="72"
UseSystemFocusVisuals="False"
Margin="{ThemeResource PivotNavButtonMargin}"
IsTabStop="False"
IsEnabled="True"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Opacity="1"
Background="Transparent" />
I am creating a Windows 10 universal App and I Have successfully created shell.xaml but I don't wanna use radioButton instead of that I have used a button and TextBlock.
I want to know how to make the TextBlock and Button a Single clickable entity through listView Item.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="mySplitView" DisplayMode="CompactInline" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150" Content="{Binding}">
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<StackPanel Orientation="Horizontal">
<Button FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White">
<TextBlock Foreground="White" FontSize="10" VerticalAlignment="Center" />
</StackPanel>
From what I understand you want to make an event fire whenever you press somewhere inside the StackPanel that contains the Button and TextBlock.
One solution would be to simply put your Button and TextBlock inside a ListView item.
Like this (I include all the xaml for the SplitView.Pane to make it a bit more clear):
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<ListView>
<ListView.Items>
<ListViewItem Padding="0" Tapped="ListViewItem_Tapped">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="50">
<Button FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" />
<TextBlock Foreground="White" FontSize="10" Text="Wop wop!" VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
</ListView.Items>
</ListView>
</StackPanel>
</SplitView.Pane>
In this example only the '%' is shown when the pane is closed and the '%' plus the text "Wop wop!" when it's open. Whenever the content of this ListViewItem (the buton or TextBlock) is pressed, the method "ListViewItem_Tapped" will fire.
If I in any way misunderstood your question or you need any more info about my answer please let me know.
Have a wonderful day!
PS. The button still "acts" like a button, by showing it's own border, visual states and so on. I don't know from the top of my head how to disable this. But you could perhaps try disabling it or using another textblock instead? .DS
Hi I am trying to get my UI have scrolling in partial page having a list. Here's my code -
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,10">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTerm" Text="potato" Width="379" />
<Button x:Name="btnSearch" Content="Go" Click="btnSearch_Click" />
</StackPanel>
<TextBlock x:Name="noResultsTxt" Visibility="Collapsed" Margin="10, 30, 0, 0" Text="No results found! try different search term" Style="{StaticResource PhoneTextNormalStyle}" />
<ScrollViewer Height="520" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListBox x:Name="itemlist" SelectionChanged="itemlist_SelectionChanged" Margin="0,10,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" >
<TextBlock Text="{Binding Title}" FontSize="35" FontWeight="Normal"/>
<TextBlock Text="{Binding CommaCategories}" FontSize="20" FontWeight="Light" FontStyle="Italic"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Doesnt seem to be scrolling at the List area. i seem to have figured out that the issue is with Scrollviewer not able to interact where ListBox exists. I verified that the scrolling is happening perfectly fine by setting IsHitTestVisible property of ListBox to be false.
Can someone help me out!
Answering my own question! Just as AMR commented it, I figured out that I don't need the scroll viewer, I just set the height of ListBox and scrolling worked fine! :)
On why external scrollviewer wont work with Listbox - https://stackoverflow.com/a/1294786/729032
I am trying to bind an element inside the BottomAppBar to an element outside of it.
Here's a sample XAML to elucidate:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="text" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Page.BottomAppBar>
<AppBar>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Text, ElementName=text}" Click="Button_Click_1"></Button>
<Button Content="{Binding Text, ElementName=text2}" Click="Button_Click_1"></Button>
<TextBox x:Name="text2" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</AppBar>
</Page.BottomAppBar>
The first button never updates (the textbox it's bound to is outside of the BottomAppBar), however, the second button updates as you would expect. How do I make the page visible to BottomAppBar?
I don't have the audacity to say it's Bug, though that's what I believe it is, I played around this problem which coasts me like one week :
First : This is not just for the BottomAppBar, the TopAppBar suffers the same problem.
Second : The problem is that ElementName binding works only when your source Element is an Element that is inside one of the AppBars, that means :
From BottomAppBar(target) to TopAppBar(source) : Works
From BottomAppBar(target) to BottomAppBar(source) : Works
From TopAppBar(target) to BottomAppBar(source) : Works
From TopAppBar(target) to TopAppBar(source) : Works
From TopAppBar(target) to Something outside the two AppBars(source) : Doesn't Work
From BottomAppBar(target) to Something outside the two AppBars(source) : Doesn't Work
Example :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="text" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Page.TopAppBar>
<AppBar>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Text, ElementName=text}" Click="Button_Click_1"></Button>
<Button Content="{Binding Text, ElementName=text2}" Click="Button_Click_1"></Button>
<TextBox x:Name="text3" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBox x:Name="text3" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</AppBar>
</Page.TopAppBar>
<Page.BottomAppBar>
<AppBar>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Text, ElementName=text}" Click="Button_Click_1"></Button>
<Button Content="{Binding Text, ElementName=text3}" Click="Button_Click_1"></Button>
<TextBox x:Name="text2" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBox x:Name="text3" MinWidth="200" MinHeight="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</AppBar>
</Page.BottomAppBar>
The Content of the first button in both AppBars won't show anything, however the second button of both of the AppBars will show correctly.
I found out that the only thing that the AppBar sees from outside, is the DataContext of the root Page Element, hence think about using a backing property in the DataContext to handle all that, this works fine for me.
It doesn't work, because "text" TextBox is in different visual tree than button, so button doesn't know about "text". Such binding is impossible directly, but there exists solution.
Can you try this
<Button Content="{Binding Path=text.Text}" Click="Button_Click_1"></Button>