I'm using ComputedHorizontalScrollBarVisibility but this doesn't work when you set the HorizontalScrollBarVisibility to "Hidden".
What I'm trying to achieve is knowing if a ScrollViewer should be visible but without showing the ScrollViewer. Then bind that result to show the buttons that control the ScrollViewer (in this case the `StackPanel below).
XAML
<ScrollViewer HorizontalScrollBarVisibility="Auto" x:Name="Scroll">
.....
</ScrollViewer>
<StackPanel Visibility="{Binding ElementName=Scroll, Path=ComputedHorizontalScrollBarVisibility}">
<Button Grid.Column="0" Content="Left" HorizontalAlignment="Left" Click="..."/>
<Button Grid.Column="1" Content="Right" HorizontalAlignment="Right" Click="..."/>
</StackPanel >
If you need to control the way the ScrollViewer (or any control, really) is laid out, consider using a ControlTemplate, which is accesible in any Control's Template property. as this will allow you to bind to the object itself and values passed in to it, and provide such templating. This may, however, involve needing to deal with the computations to show the exact part of your control which is visible.
You can get what you want by simple adding up the width of content elements inside ScrollViewer, e.g. if you have a StackPanel (with Orientation=Horizontal) inside ScrollViewer then add up the width of each child element in the StackPanel and compare it with ActualWidth of ScrollViewer. if the sum is less greater than the ActualWidth of ScrollViewer then you need to scroll it.
For more details refer this link
In my experience, the scroll viewer property values can be stale until the next layout pass. It's code-behind in my simple example below but this does work the way you want.
I create a dependency property called "ShowScrollButtons". You can probably watch for extent and viewport size changes and automatically recompute the property.
When the scroll content size changes, I trigger a re-evaluate of ShowScrollButtons. Note the call to UpdateLayout to make sure the extent and viewport sizes are up-to-date. Again, it's a sample so I'm only checking the Width here for left/right scroll buttons
private void UpdateScrollButtonVis()
{
UpdateLayout();
ShowScrollButtons = (Scroll.ExtentHeight > Scroll.ViewportWidth);
}
In XAML...
<Window.Resources>
<BooleanToVisibilityConverter x:Key="boolvis"/>
</Window.Resources>
<Grid x:Name="theGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Width="100" Height="100" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" x:Name="Scroll">
<Canvas x:Name="theCanvas" Width="300" Height="300" Background="Green"/>
</ScrollViewer>
<StackPanel Grid.Row="1" Visibility="{Binding ShowScrollButtons,Converter={StaticResource boolvis}}">
<Button Grid.Column="0" Content="Left" HorizontalAlignment="Left" />
<Button Grid.Column="1" Content="Right" HorizontalAlignment="Right" />
</StackPanel >
<Button x:Name="toggle" Grid.Row="2" Height="25" Width="100" Click="toggle_Click">Toggle</Button>
</Grid>
Update:
How about a new approach works with multiple scroll viewers and StackPanels without code-behind.
Use an Attached Property to control the external button visibility:
public class ScrollViewWatcher
{
public static readonly DependencyProperty HorizontalButtonVisibility = DependencyProperty.RegisterAttached(
"HorizontalButtonVisibility",
typeof(Visibility),
typeof(ScrollViewWatcher),
new FrameworkPropertyMetadata(Visibility.Visible,
FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsArrange | FrameworkPropertyMetadataOptions.AffectsMeasure)
);
public static Visibility GetHorizontalButtonVisiblity(UIElement element)
{
return (Visibility)element.GetValue(HorizontalButtonVisibility);
}
public static void SetHorizontalButtonVisibility(UIElement element, Visibility value)
{
element.SetValue(HorizontalButtonVisibility, value);
ScrollViewer sv = element as ScrollViewer;
if (sv != null)
{
sv.ScrollChanged -= sv_ScrollChanged;
sv.ScrollChanged += sv_ScrollChanged;
}
}
static void sv_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
var sv = sender as ScrollViewer;
if (sv != null)
{
var vis = sv.ExtentHeight > sv.ViewportWidth ? Visibility.Visible : Visibility.Hidden;
sv.SetValue(HorizontalButtonVisibility, vis);
}
}
}
Then in XAML, bind to the appropriate ScrollViewer like this:
<ScrollViewer
x:Name="sv1" local:ScrollViewWatcher.HorizontalButtonVisibility="Visible"
Grid.Row="0" Width="100" Height="100" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" >
<Canvas x:Name="theCanvas" Width="300" Height="300" Background="Green"/>
</ScrollViewer>
<StackPanel Grid.Row="1" Visibility="{Binding ElementName=sv1,Path=(local:ScrollViewWatcher.HorizontalButtonVisibility), Mode=OneWay}">
<Button Grid.Column="0" Content="Left" HorizontalAlignment="Left" />
<Button Grid.Column="1" Content="Right" HorizontalAlignment="Right" />
</StackPanel >
This works great in my test. This was a fun challenge. Maybe someone can enlighten us with a better approach but I'm pretty happy with this.
Thank you all for the answers but finally got a workaround a bit easier, instead of binding the visibility from the StackPanel of the buttons just call a ScrollChanged in the ScrollViewer and then in code check for the ComputedHorizontalScrollBarVisibility and change visibilities depending on the result.
XAML
<ScrollViewer HorizontalScrollBarVisibility="Auto" x:Name="Scroll" ScrollChanged="Scroll_ScrollChanged">
.....
</ScrollViewer>
<StackPanel x:Name="BPanel" Visibility="Hidden">
<Button Grid.Column="0" Content="Left" HorizontalAlignment="Left" Click="..."/>
<Button Grid.Column="1" Content="Right" HorizontalAlignment="Right" Click="..."/>
</StackPanel >
C#
private void Scroll_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
ScrollViewer scroll = (ScrollViewer)sender;
if(scroll.HorizontalScrollBarVisibility == ScrollBarVisibility.Auto)
{
if (scroll.ComputedHorizontalScrollBarVisibility == Visibility.Visible)
{
scroll.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
BPanel.Visibility = Visibility.Visible;
}
}
}
Related
I am building a WPF MVVM application.
What I have:
I have a ShellWindow which looks like this:
It is composed by 2 rows:
1: the hamburger menu (not important) with Height="*"
2: the console with Height="100"
The console is a UserControl:
<UserControl
//namespaces>
<Grid Name="LoggingGrid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}">
<Button
x:Name="CollapseBtn"
Width="25"
Height="25"
Click="CollapseBtn_Click"
Content="▲">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Margin="5,0,0,0" Orientation="Horizontal">
<Image
Height="25"
Source="/Images/console-icon.png"
Visibility="Visible" />
<Label
Content="Console"
FontSize="16"
Foreground="White" />
</StackPanel>
</TextBlock>
<Border Grid.Row="1">
<ListView
x:Name="LoggingList"
Margin="5"
Background="Black"
BorderThickness="0"
Foreground="White"
ItemsSource="{Binding Logs, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Border>
</Grid>
</UserControl>
I have omitted the non-important things.
What I want to do:
Whenever the user clicks on the button, the console should collapse and look something like this:
The arrow is also changed.
How can I implement this? What is the best approach using MVVM?
What I have tried:
I have tried using a button click event handler in the code behind - CollapseBtn_Click, just to see what will happen:
private void CollapseBtn_Click(object sender, System.Windows.RoutedEventArgs e)
{
LoggingGrid.Visibility = System.Windows.Visibility.Hidden;
}
Apparently it removes the user control and leaves a white background where it used to be.
Instead of setting the Visibility of the whole LoggingGrid to Hidden, you should set the Visibility of the LoggingList to Collapsed. (For the difference between Hidden and Collapsed, see here: Difference between Visibility.Collapsed and Visibility.Hidden).
Depending on your layout in the ShellWindow you probably have to adjust your row height configuration in the UserControl such that the collapsed LoggingGrid leads to a row with a height of zero.
Regarding MVVM the best approach would be to bind the Button to a bool property ConsoleVisible on your ViewModel such that clicking the button toggles the property between true and false. The styling of the button can be bound to the same property. For the LoggingList Visibility you could use a Binding with a BooleanToVisibilityConverter on the same property.
In my app I set the Text of the TextBlock named tbkStatus many times.
How can I make the TextBlock be just grow auto to fit the text but not shrink when the text changed?
The StatusText changes every few seconds, There are statuses with long text and short text.
I want my TextBlock to fit itself to the size of the longest text that was, and even when there is a short text the TextBlock should not shrink
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="200" Width="400"
WindowStartupLocation="CenterScreen"
ResizeMode="CanMinimize" Topmost="True">
<Window.Resources>
</Window.Resources>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="AUTO" />
<RowDefinition Height="AUTO" />
<RowDefinition Height="AUTO" />
<RowDefinition Height="AUTO" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Please wait ..." Grid.Row="1" Margin="6"/>
<TextBlock Name="tbkStatus" Grid.Row="2" Margin="6" TextWrapping="Wrap" Text="{Binding StatusText}"/>
<ProgressBar Grid.Row="3" Margin="6" Height="20"/>
<Button Grid.Row="4" HorizontalAlignment="Center" Padding="24,3" Margin="6" Content="Stop"/>
</Grid>
</Window>
Xaml only solution:
<TextBlock Text="{Binding StatusText}"
MinWidth="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"
HorizontalAlignment="Left"/>
This way whenever the Width growths, MinWidth growths too. Hence, the control can't shrink back.
I guess you could just listen to Layout Events like SizeChanged or LayoutUpdated or write some sort of behavior
In the below example, the basic premise is to listen to either of these events, and force your control to never shrink
Note this is totally untested and was just an idea, maybe you could set the MinWidth Property instead
Xaml
<TextBlock x:Name="tbkStatus" SizeChanged="OnSizeChanged"/>
Code Behind
private double _lastSize;
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
var textBlock = sender as TextBlock;
if (textBlock == null)
{
return;
}
if (e.WidthChanged)
{
if (textBlock.Width < _lastSize)
{
textBlock.Width = _lastSize;
}
_lastSize = textBlock.Width;
}
}
Also Note
The SizeChangedEventArgs Class has many properties that you might be able to take advantage of
You can do something like this:
<TextBlock Name="tbkStatus" Grid.Row="2" Margin="6" TextWrapping="Wrap" Text="{Binding StatusText}"/>
Since TextBlock doesn't have TextChange event this will do that job
DependencyPropertyDescriptor dp = DependencyPropertyDescriptor.FromProperty(TextBlock.TextProperty, typeof(TextBlock));
int textLength =0
dp.AddValueChanged(tbkStatus, (object a, EventArgs b) =>
{
if (textLength < tbkStatus.Text.Length)
{
textLength = tkbStatus.Text.Length;
tbkStatus.Width = textLength * SomeValue; //You have to play around and see what value suits you best since it depends on font and it's size
}
});
Alternatively, you can use a TextBox and make it read only and use the TextChanged event.
In my WP 8.1 app I have the MapControl:
<Maps:MapControl x:Name="mapControl" ZoomLevelChanged="mapControl_ZoomLevelChanged" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1">
<Maps:MapItemsControl x:Name="MapIcons" ItemsSource="{Binding}" >
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
</StackPanel>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>
On the map I got markers, and when I click one of them, "contentGrid" apears. The code for that behavior:
private void myStack_Tapped(object sender, TappedRoutedEventArgs e)
{
StackPanel s = sender as StackPanel;
Grid contentBox = s.FindName("contentGrid") as Grid;
contentBox.Visibility = Visibility.Visible;
}
I want to see "contentGrid" always above other markers, but some of them are above my "contentGrid". I tried to set Canvas.Zindex property in XAML in "contentGrid", but it's not working.
I attach screenshot to exemplify my problem.
The StackPanel stacks vertically (by default) or horizontally.
If you want children of the StackPanel in "different layers",
you 'd better replace the StackPanel of the DataTemplate with a Grid or Canvas
A simple solution is to
<DataTemplate>
<Grid Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
Writing the Image in the XAML before the Grid puts it under graphically.
Last, you can play with the ZIndex if you add other controls are added to the Grid/Canvas.
Otherwise I am not sure the ZIndex is really necessaray
EDIT
Canvas.ZIndex is an attached property of Canvas.
But surprisingly it works with the Grid !
The greater Zindex is, the closer the control to your eye (over the other controls)
Regards
I'm working on a WPF GUI, and I want the window to auto-size to the content, but not to everything: I have some various buttons & other controls, and I want to autosize the width to that. If I add a long item to the list box, I want the window to stay the same size.
Example code:
<Window x:Class="QuickieWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" SizeToContent="WidthAndHeight" ResizeMode="CanMinimize">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Width="100" Content="Foo" Click="Button_Click"/>
<Button Width="100" Content="Bar" Click="Button_Click"/>
<Button Width="100" Content="Baz" Click="Button_Click"/>
</StackPanel>
<ListBox Grid.Row="1" Name="TheList" Height="100"/>
</Grid>
</Window>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
string str = "This is a really long text item that will be wider than the " +
"three buttons. I want a horizontal scrollbar on the listbox, not a wider " +
"window. I want the window to size to the buttons, not to this listbox.";
this.TheList.Items.Add(str);
}
}
Initially, the window is sized to the buttons:
After adding a long item to the list box, I currently get this:
But I'd rather get this:
(I did that last screenshot by setting MaxWidth on the list box, but that isn't a good solution for the full application: In the full application, it's more than just three buttons; it's buttons, icons, textboxes, labels, etc, and I want the window to autosize to the whole mess, but not to the listbox at the bottom.)
You can bind width of content you do not want to autosize to the actual width of content you do, for example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" x:Name="panel">
<Button Width="100"
Content="Foo"
Click="Button_Click" />
<Button Width="100"
Content="Bar"
Click="Button_Click" />
<Button Width="100"
Content="Baz"
Click="Button_Click" />
</StackPanel>
<ListBox Grid.Row="1"
Name="TheList"
Height="100" Width="{Binding ElementName=panel, Path=ActualWidth}" />
</Grid>
Here I bound width of ListBox to the actual width of panel with buttons, which in this case achieves what you want.
You have to limit the width of the ListBox, else the parent window would just resize with whichever the control that take the most space due to SizeToContent="WidthAndHeight".
<StackPanel Orientation="Horizontal">
<Button Width="100" Content="Foo" Click="Button_Click"/>
<Button Width="100" Content="Bar" Click="Button_Click"/>
<Button Width="100" Content="Baz" Click="Button_Click"/>
</StackPanel>
<!-- set the width to 300 -->
<ListBox Grid.Row="1" Name="TheList" Height="100" Width="300" />
Give your stackPanel a name, e.g.
<StackPanel Name="MyPanel" Orientation="Horizontal">
Then in BOTH your list box and window properties add this;
Width="{Binding ElementName=MyPanel, Path=ActualWidth}"
You will need to include horizontal scrolling in your listbox.
So, I have been looking for solution more than 12 hours(but without success). How should I change ListView ControlTemplate to get effect like this:
(This question is about this buttons that working like scrollview)
Have you another ideas how to create control like this?
It's vertical representation, but idea is understood: hide scrollbars and manipulate them manually. For more responsive UI you'll need to subscribe to MouseDown event instead of Click, also NullReference exceptions are possible on every line of Grid_Click().
XAML:
<ListView.Template>
<ControlTemplate>
<Grid ButtonBase.Click="Grid_Click">
<Grid.RowDefinitions>
<RowDefinition Height="16"/>
<RowDefinition Height="*"/>
<RowDefinition Height="16"/>
</Grid.RowDefinitions>
<Button Content="^" Grid.Row="0"/>
<Button Content="v" Grid.Row="2"/>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Hidden">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</ControlTemplate>
</ListView.Template>
Code:
private void Grid_Click(object sender, RoutedEventArgs e) {
bool down = (e.OriginalSource as Button).Content as string == "v";
var scroller = VisualTreeHelper.GetChild((e.OriginalSource as Button).Parent, 2) as ScrollViewer;
scroller.ScrollToVerticalOffset(scroller.VerticalOffset + (down ? 1 : -1));
}
Magical number 2 in GetChild() is index of ScrollViewer inside its parent (Grid).