ProgressBar 질문드려요

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

제가 ProgressBar 기본 템플릿을 수정해서 사용하는데 ProgressBar에는 다른 컨트롤처럼 Content나 text가 없더라구요 ProgressBar 중앙에 ProgressBar의 Value 같은 수치를 나타나게 하려고하는데

<Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
    <Setter Property="Foreground" Value="{StaticResource ProgressBar.Progress}"/>
    <Setter Property="Background" Value="{StaticResource ProgressBar.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ProgressBar.Border}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Value" Value="80"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid x:Name="TemplateRoot">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Determinate"/>
                            <VisualState x:Name="Indeterminate">
                                <Storyboard RepeatBehavior="Forever">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <PointAnimationUsingKeyFrames Storyboard.TargetName="Animation" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                                        <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
                                        <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
                                        <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
                                    </PointAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
                    <Rectangle x:Name="PART_Track"/>
                    <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
                        <Border Background="{StaticResource ProgressBar.Progress}" BorderBrush="{StaticResource ProgressBar.Progress}" BorderThickness="0" CornerRadius="3.3" Margin="1,1,1,1"/>
                    </Grid>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <TextBlock Text="들어갈" VerticalAlignment="Center" FontSize="12" Foreground="#343232" Margin="12,0,5,0" FontFamily="{StaticResource ProgressBarD2CodingFont}"/>
                        <TextBlock x:Name="ValueText" VerticalAlignment="Center" FontSize="12" Foreground="#343232" FontFamily="{StaticResource ProgressBarD2CodingFont}" Text="23"/>
                        <TextBlock Text="번" VerticalAlignment="Center" FontSize="12" Foreground="#343232" Margin="0,0,0,0" FontFamily="{StaticResource ProgressBarD2CodingFont}"/>
                    </StackPanel>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <!--<Trigger Property="IsIndeterminate" Value="true">
                        <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                    </Trigger>-->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

위의 스타일을 수정하면서 만들어 보는데 간단하게 생각하면 ProgressBar에 스타일을 적용시키고 Grid를 줘서 그 안에 TextBlock을 주면 간단하지만 ProgressBar Template에서 공부겸 해보려 하는데 템플릿 안에 를 줘서

<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
    <TextBlock Text="들어갈" VerticalAlignment="Center" FontSize="12" Foreground="#343232" Margin="12,0,5,0" FontFamily="{StaticResource ProgressBarD2CodingFont}"/>
    <TextBlock x:Name="ValueText" VerticalAlignment="Center" FontSize="12" Foreground="#343232" FontFamily="{StaticResource ProgressBarD2CodingFont}" Text="23"/>
    <TextBlock Text="번" VerticalAlignment="Center" FontSize="12" Foreground="#343232" Margin="0,0,0,0" FontFamily="{StaticResource ProgressBarD2CodingFont}"/>
</StackPanel>

만들었지만 여기서 ValueText라는 곳의 Text에 Value값이나 이제 다른곳에서 버튼을 누를때마다 ValueText의 Text값이 +1 되는 방식을 만들어 보려고합니다.

여기서 궁금증은 이거입니다.

  1. template에 x:Name ValueText 의 text에 ProgressBar 의 Value 값을 넣을수 있는지
  2. 버튼을 누를때마다 코드비하인드에서 ValueText값을 +1씩 늘릴 수 있는지
  3. 직접적으로
<StackPanel Style="{StaticResource StackPanel_Horizontal_Center}">
    <Grid>
        <ProgressBar Value="50"/>
        <TextBlock Text="test"/>
    </Grid>
</StackPanel>

<Grid를 써서 겹치게 하는 방법 말고 다른 방법이 있는지 궁금합니다.
예를들어 다른 컨트롤에 있는 ContentPresenter?(자세히는 모르겠습니다) 같은 걸 줘서 버튼의 content처럼 쓸수 있게 할 수 있는지 궁금합니다.

글이 길어지다보니 이해가 어려운점 양해부탁드립니다

1개의 좋아요
2

<TextBlock x:Name="ValueText" VerticalAlignment="Center" FontSize="12" Foreground="#343232" FontFamily="{StaticResource ProgressBarD2CodingFont}" Text="23"/>
위 부분을
아래처럼 Text 바인딩 시켜주면 되겠네요.
<TextBlock x:Name="ValueText" Text="{Binding Value, RelativeSource={RelativeSource AncestorType=ProgressBar}}" VerticalAlignment="Center" FontSize="12" Foreground="#343232" FontFamily="{StaticResource ProgressBarD2CodingFont}" Text="23"/>

PrograssBar 사용하는 부분은

<ProgressBar Minimum="0" Maximum="100"
             Value="{Binding TestValue, RelativeSource={RelativeSource AncestorType=local:MainWindow}}" 
             VerticalAlignment="Center"
             Height="60"/>

Value에 데이터 바인딩만 걸어주면 나올거같네요.

스크린샷 2023-11-29 164522
스크린샷 2023-11-29 164522786×443 7.72 KB

2개의 좋아요
3

아 감사합니다 아까 바인딩으로 value 했을때는 오류도 안나고 아무 변화도 없어서 안되는 줄 알았는데
마지막에 오류가 있었나보네요

1개의 좋아요
4

궁금한점이 있는데 Template에 지정한 x:Name값도 레이아웃쪽에서나 코드비하인드쪽에서 불러올 수 있나요?

1개의 좋아요
5

코드비하인드에서는

var control = progressBar.Template.FindName("ValueText", progressBar);

위와같이 찾을 수 있겠지만 xaml단에서 Template안에있는 x:Name을 알수 있는 방법은 잘 모르겠네요.

3개의 좋아요
6

아하 감사합니다~

1개의 좋아요